/* Games: the arcade (/play/), game and campaign pages, the game shell, and the codes list.
 * Page colours follow the active theme's tokens (--gt-* or --ic-*) with neutral fallbacks; the games themselves
 * keep their own palette (the stage). Fonts: Barlow and Barlow Condensed, SIL OFL 1.1 (assets/fonts). */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-latin-800-italic.woff2) format("woff2"); }

.gtg-root,
.gtg-codes {
	--gtg-ink: var(--gt-ink, var(--ic-text, #1D1B3A));
	--gtg-soft: var(--gt-ink-soft, var(--ic-muted, #4A4866));
	--gtg-surface: var(--gt-surface, var(--ic-surface, #FFFFFF));
	--gtg-surface-2: var(--gt-surface-2, var(--ic-surface-2, #F7F3EA));
	--gtg-line: var(--gt-line, var(--ic-line, #1D1B3A));
	--gtg-line-soft: var(--gt-line-soft, var(--ic-line-soft, rgba(29, 27, 58, .16)));
	--gtg-primary: var(--gt-primary, var(--ic-pink, #FFB627));
	--gtg-on-primary: var(--gt-on-primary, var(--ic-on-pink, #1D1B3A));
	--gtg-shadow: var(--gt-shadow-color, var(--ic-line, #1D1B3A));
	--gtg-focus: var(--gt-focus, var(--ic-focus, #1D1B3A));
	--gtg-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
	--gtg-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
	--gtg-ease: cubic-bezier(.2, .8, .2, 1);
	color: var(--gtg-ink);
}

.gtg-root {
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 24px 56px;
	box-sizing: border-box;
}
.gtg-root *,
.gtg-root *::before,
.gtg-root *::after { box-sizing: border-box; }
.gtg-root img { max-width: 100%; height: auto; }
.gtg-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- buttons */

.gtg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 2px solid var(--gtg-line);
	border-radius: 12px;
	background: var(--gtg-surface);
	color: var(--gtg-ink);
	font: 600 15px/1.2 var(--gtg-body);
	text-decoration: none;
	cursor: pointer;
	box-shadow: 3px 3px 0 var(--gtg-shadow);
	transition: transform 120ms var(--gtg-ease), box-shadow 120ms var(--gtg-ease);
}
.gtg-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--gtg-shadow); }
.gtg-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--gtg-shadow); }
.gtg-btn:focus-visible,
.gtg-root a:focus-visible,
.gtg-root input:focus-visible,
.gtg-root select:focus-visible { outline: 3px solid var(--gtg-focus); outline-offset: 2px; box-shadow: 0 0 0 6px #FFB627; }
.gtg-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.gtg-btn--primary { background: var(--gtg-primary); color: var(--gtg-on-primary); font-weight: 700; }
.gtg-btn--ghost { background: transparent; box-shadow: none; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.gtg-btn--ghost:hover { box-shadow: none; transform: none; }
.gtg-btn--sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.gtg-btn--lg { min-height: 52px; padding: 0 24px; font-size: 17px; }

.gtg-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--gtg-primary);
	color: var(--gtg-on-primary);
	border: 2px solid var(--gtg-line);
	font: 700 13px/1.2 var(--gtg-body);
}

/* ---------------------------------------------------------------- hero */

.gtg-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 40px;
	align-items: center;
	margin: 8px 0 40px;
}
.gtg-hero__title {
	margin: 0 0 16px;
	font: 800 clamp(44px, 6.4vw, 84px)/.94 var(--gtg-display);
	letter-spacing: -.01em;
	color: var(--gtg-ink);
}
.gtg-hero__lead { margin: 0 0 24px; font-size: 18px; line-height: 1.55; color: var(--gtg-soft); max-width: 34em; }
.gtg-hero__actions { margin: 0; }
.gtg-hero__scene { filter: drop-shadow(6px 6px 0 var(--gtg-shadow)); }
.gtg-scene { display: block; width: 100%; height: auto; }
.gtg-scene__num { font: 700 13px var(--gtg-display); }
.gtg-scene__label { font: 800 15px var(--gtg-display); }
.gtg-scene__car-in { animation: gtg-drive 1.8s var(--gtg-ease) .2s both; }
.gtg-scene__wheel { animation: gtg-spin .45s linear 4 .2s; }
.gtg-scene__puff { animation: gtg-puff 2.2s ease-out .4s both; }
.gtg-scene__puff--2 { animation-delay: .7s; }
.gtg-scene__blink { animation: gtg-blink 2.4s ease-in-out infinite; }
@keyframes gtg-drive { from { transform: translateX(-330px); } to { transform: none; } }
@keyframes gtg-spin { to { transform: rotate(360deg); } }
@keyframes gtg-puff { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-30px, -18px) scale(1.4); } }
@keyframes gtg-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ------------------------------------------------- campaign banner, ribbon */

.gtg-banner,
.gtg-campaign {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding: 28px;
	margin: 0 0 40px;
	border: 3px solid var(--gtg-line);
	border-radius: 24px;
	background: #2E2C63;
	color: #FFF7EA;
	box-shadow: 6px 6px 0 var(--gtg-shadow);
	overflow: hidden;
}
.gtg-banner__title,
.gtg-campaign__title { margin: 6px 0 12px; font: 800 clamp(34px, 4.6vw, 60px)/.96 var(--gtg-display); color: #FFF7EA; }
.gtg-banner__lead,
.gtg-campaign__lead { margin: 0 0 18px; font-size: 17px; line-height: 1.55; color: #EDE6F7; max-width: 36em; }
.gtg-banner__when,
.gtg-campaign__when { margin: 0; font: 600 15px/1.4 var(--gtg-body); color: #EDE6F7; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gtg-banner__art,
.gtg-campaign__art { width: 100%; border-radius: 16px; border: 3px solid #1D1B3A; }
.gtg-campaign__reward {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: baseline;
	margin: 0 0 20px;
	padding: 10px 14px;
	border: 2px dashed #FFB627;
	border-radius: 14px;
	background: rgba(255, 182, 39, .1);
}
.gtg-campaign__reward span { font: 600 14px var(--gtg-body); color: #FFD47A; }
.gtg-campaign__reward strong { font: 800 22px/1.15 var(--gtg-display); color: #FFF7EA; }
.gtg-campaign__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; }
.gtg-campaign__until { font: 600 15px var(--gtg-body); color: #EDE6F7; }
.gtg-banner .gtg-btn,
.gtg-campaign .gtg-btn { --gtg-shadow: #120F26; --gtg-line: #120F26; }
.gtg-banner .gtg-btn--primary,
.gtg-campaign .gtg-btn--primary { background: #FFB627; color: #1D1B3A; }

.gtg-theme-halloween { background: radial-gradient(120% 120% at 85% 0%, #6C3FA5 0%, #2B1748 55%, #170C2B 100%); }
.gtg-theme-thanksgiving { background: radial-gradient(120% 120% at 85% 0%, #C46A1B 0%, #6E3410 55%, #3A1B08 100%); }
.gtg-theme-christmas { background: radial-gradient(120% 120% at 85% 0%, #1FB5A8 0%, #0E5E58 55%, #06302D 100%); }
.gtg-theme-new-year { background: radial-gradient(120% 120% at 85% 0%, #2E2C63 0%, #1D1B3A 60%, #0F0E22 100%); }

.gtg-ribbon {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: baseline;
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 2px solid var(--gtg-line);
	border-radius: 14px;
	color: #FFF7EA;
	font-size: 15px;
	line-height: 1.45;
}
.gtg-ribbon strong { font: 800 18px var(--gtg-display); }
.gtg-ribbon a { color: #FFD47A; font-weight: 700; }
.gtg-notice {
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 2px solid var(--gtg-line);
	border-radius: 14px;
	background: var(--gtg-surface-2);
	font-weight: 600;
}

/* --------------------------------------------------------------- cards */

.gtg-section-title { margin: 0 0 18px; font: 800 clamp(30px, 3.4vw, 42px)/1 var(--gtg-display); color: var(--gtg-ink); }
.gtg-games { margin: 0 0 44px; }
.gtg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.gtg-card {
	display: flex;
	flex-direction: column;
	border: 2px solid var(--gtg-line);
	border-radius: 18px;
	background: var(--gtg-surface);
	box-shadow: 4px 4px 0 var(--gtg-shadow);
	overflow: hidden;
	transition: transform 120ms var(--gtg-ease), box-shadow 120ms var(--gtg-ease);
}
.gtg-card:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--gtg-shadow); }
.gtg-card__media { display: block; border-bottom: 2px solid var(--gtg-line); background: #1D1B3A; aspect-ratio: 16 / 9; }
.gtg-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gtg-card__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.gtg-card__tab {
	align-self: flex-start;
	margin: 0 0 10px;
	padding: 2px 10px;
	border-radius: 999px;
	border: 2px solid var(--gtg-line);
	background: var(--gtg-surface-2);
	font: 600 13px/1.4 var(--gtg-body);
}
.gtg-card--season .gtg-card__tab { background: var(--gtg-game-accent, #6C3FA5); color: #FFF; }
.gtg-card__title { margin: 0 0 6px; font: 800 30px/1 var(--gtg-display); }
.gtg-card__title a { color: var(--gtg-ink); text-decoration: none; }
.gtg-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gtg-card__tagline { margin: 0 0 12px; color: var(--gtg-soft); line-height: 1.5; }
.gtg-card__learn { margin: 0 0 16px; padding: 0 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--gtg-soft); }
.gtg-card__learn li { margin: 0 0 4px; }
.gtg-card__foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: auto; }
.gtg-card__best { font: 600 14px var(--gtg-body); color: var(--gtg-soft); }

.gtg-teach {
	margin: 0 0 40px;
	padding: 22px 24px;
	border: 2px solid var(--gtg-line);
	border-radius: 18px;
	background: var(--gtg-surface-2);
	max-width: 760px;
}
.gtg-teach p { line-height: 1.6; }
.gtg-fine { margin: 32px 0 0; font-size: 13px; color: var(--gtg-soft); }

/* ---------------------------------------------------------- game page */

.gtg-crumbs { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; font-size: 14px; color: var(--gtg-soft); }
.gtg-crumbs a { color: var(--gtg-ink); font-weight: 600; }
.gtg-gamehead { margin: 0 0 18px; }
.gtg-gamehead__title { margin: 0 0 8px; font: 800 clamp(40px, 5.6vw, 72px)/.95 var(--gtg-display); color: var(--gtg-ink); }
.gtg-gamehead__tagline { margin: 0 0 12px; font-size: 18px; line-height: 1.5; color: var(--gtg-soft); max-width: 44em; }
.gtg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gtg-chip { padding: 3px 12px; border: 1.5px solid var(--gtg-line); border-radius: 999px; font: 600 14px/1.5 var(--gtg-body); background: var(--gtg-surface); }
.gtg-chip--season { background: var(--gtg-game-accent, #6C3FA5); color: #FFF; border-color: var(--gtg-line); }
.gtg-chip--best { background: var(--gtg-primary); color: var(--gtg-on-primary); }

.gtg-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0 44px; }
.gtg-info__block { padding: 18px 20px; border: 1.5px solid var(--gtg-line-soft); border-radius: 16px; background: var(--gtg-surface); }
.gtg-info__title { margin: 0 0 8px; font: 800 24px/1.05 var(--gtg-display); color: var(--gtg-ink); }
.gtg-info__block p { margin: 0 0 10px; line-height: 1.6; }
.gtg-list { margin: 0; padding: 0 0 0 18px; line-height: 1.6; }
.gtg-list li { margin: 0 0 6px; }
.gtg-share__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gtg-share__link {
	flex: 1 1 200px;
	min-width: 0;
	min-height: 44px;
	padding: 0 12px;
	border: 2px solid var(--gtg-line);
	border-radius: 12px;
	background: var(--gtg-surface-2);
	color: var(--gtg-ink);
	font: 500 14px var(--gtg-body);
}
.gtg-share__status { min-height: 1.4em; margin: 8px 0 0 !important; font-weight: 600; }

/* --------------------------------------------------------------- stage */

.gtg-stage {
	--gtg-night: #1D1B3A;
	--gtg-paper: #FFF7EA;
	--gtg-game-ink: #1D1B3A;
	--gtg-amber: #FFB627;
	margin: 0 0 8px;
	scroll-margin-top: 90px;
}
.gtg-stage.gtg-pal-gold { --gtg-night: #031323; --gtg-paper: #F9F6E5; --gtg-game-ink: #051E39; --gtg-amber: #EAAA00; }
.gtg-stage__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	font-family: var(--gtg-body); /* the stage keeps the games' fonts under any theme, and on the bare embed page */
	max-height: min(78vh, 760px);
	border: 3px solid var(--gtg-game-ink);
	border-radius: 20px;
	background: var(--gtg-night);
	box-shadow: 6px 6px 0 var(--gtg-shadow, #1D1B3A);
	overflow: hidden;
	color: var(--gtg-paper);
}
.gtg-poster { position: absolute; inset: 0; }
.gtg-poster__art { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.gtg-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 14, 34, 0) 22%, rgba(15, 14, 34, .62) 48%, rgba(15, 14, 34, .93) 76%); pointer-events: none; }
.gtg-poster__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 24px 28px 26px; max-width: 640px; }
.gtg-poster__title { margin: 0 0 6px; font: 800 clamp(34px, 5vw, 60px)/.95 var(--gtg-display); color: var(--gtg-paper); text-shadow: 0 2px 0 rgba(15, 14, 34, .55), 0 0 18px rgba(15, 14, 34, .75); }
.gtg-poster__tagline { margin: 0 0 16px; font-size: 17px; line-height: 1.45; color: #EDE6F7; text-shadow: 0 1px 6px rgba(15, 14, 34, .9); }
.gtg-poster__hint { margin: 12px 0 0; font-size: 13px; color: #D9D3EA; text-shadow: 0 1px 4px rgba(15, 14, 34, .9); }
.gtg-poster .gtg-btn { --gtg-line: #120F26; --gtg-shadow: #120F26; }
.gtg-poster .gtg-btn--primary { background: var(--gtg-amber); color: var(--gtg-game-ink); }
.gtg-noscript { position: absolute; left: 16px; top: 16px; z-index: 2; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--gtg-paper); color: var(--gtg-game-ink); font-weight: 600; }

.gtg-modepick {
	display: grid;
	gap: 12px;
	max-width: 440px;
	padding: 16px 18px;
	border: 2px solid rgba(255, 247, 234, .35);
	border-radius: 16px;
	background: rgba(15, 14, 34, .9);
}
.gtg-fieldset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.gtg-fieldset legend { margin: 0 0 8px; font: 600 14px var(--gtg-body); color: #EDE6F7; }
.gtg-radio { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 2px solid var(--gtg-paper); border-radius: 999px; cursor: pointer; font-weight: 600; }
.gtg-radio:has(input:checked) { background: var(--gtg-amber); color: var(--gtg-game-ink); border-color: var(--gtg-game-ink); }
.gtg-radio input { accent-color: var(--gtg-amber); }
.gtg-field { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; font-weight: 600; }
.gtg-select { min-height: 40px; padding: 0 10px; border: 2px solid var(--gtg-game-ink); border-radius: 10px; background: var(--gtg-paper); color: var(--gtg-game-ink); font: 600 15px var(--gtg-body); }

/* While a game runs, the site's floating corner (the theme's dock and the chat bubble) steps aside so it never
   covers the game's A button on a phone; the engine sets the class and drops it on pause and at the end. */
html.gtg-playing .gt-floating,
html.gtg-playing .gtchat { visibility: hidden; }

/* the shell: HUD, canvas, overlay, touch */

.gtg-shell {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	font-family: var(--gtg-body);
	color: var(--gtg-paper);
	outline: none;
}
.gtg-shell:focus-visible { box-shadow: inset 0 0 0 3px var(--gtg-amber); }
.gtg-hud {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 48px;
	padding: 4px 8px 4px 14px;
	background: var(--gtg-game-ink);
	border-bottom: 3px solid var(--gtg-game-ink);
}
.gtg-hud__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; min-width: 0; }
.gtg-hud__extra { display: contents; }
.gtg-hud__stat { display: inline-flex; align-items: baseline; gap: 6px; }
.gtg-hud__label { font: 600 12px/1 var(--gtg-body); color: #CFC8E6; }
.gtg-hud__value { font: 800 20px/1 var(--gtg-display); font-variant-numeric: tabular-nums; color: var(--gtg-paper); }
.gtg-hud__stat--meter { align-items: center; }
.gtg-meter { display: inline-block; width: 74px; height: 12px; border: 2px solid var(--gtg-paper); border-radius: 999px; overflow: hidden; }
.gtg-meter__fill { display: block; height: 100%; background: var(--gtg-amber); transition: width 200ms var(--gtg-ease); }
.gtg-hud__buttons { display: flex; gap: 6px; flex-shrink: 0; }
.gtg-hud__btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 2px solid var(--gtg-paper);
	border-radius: 10px;
	background: transparent;
	color: var(--gtg-paper);
	cursor: pointer;
}
.gtg-hud__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gtg-hud__pause svg path { fill: currentColor; stroke: none; }
.gtg-hud__btn:hover { background: rgba(255, 255, 255, .1); }
.gtg-hud__btn:focus-visible { outline: 3px solid var(--gtg-amber); outline-offset: 2px; }
.gtg-hud__btn[aria-pressed="true"] { background: var(--gtg-amber); color: var(--gtg-game-ink); border-color: var(--gtg-amber); }
.gtg-canvas-wrap { position: relative; min-height: 0; overflow: hidden; touch-action: none; }
.gtg-canvas { display: block; touch-action: none; }
.gtg-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gtg-layer__live { pointer-events: auto; }
/* Scrollable panels pan with a finger on a phone, also inside the canvas's touch-action: none (the engine's
   panels, and a game's own scrolling element in rt.layer when it has the class gtg-scroll). */
.gtg-panel,
.gtg-layer .gtg-scroll { touch-action: pan-y pinch-zoom; overscroll-behavior: contain; }
.gtg-toast {
	position: absolute;
	left: 50%;
	top: 12px;
	max-width: calc(100% - 24px);
	transform: translate(-50%, -8px);
	padding: 8px 14px;
	border: 2px solid var(--gtg-game-ink);
	border-radius: 12px;
	background: var(--gtg-paper);
	color: var(--gtg-game-ink);
	font: 600 15px/1.35 var(--gtg-body);
	text-align: center;
	box-shadow: 3px 3px 0 var(--gtg-game-ink);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms var(--gtg-ease), transform 200ms var(--gtg-ease);
}
.gtg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.gtg-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: grid;
	place-items: center;
	padding: 12px;
	background: rgba(15, 14, 34, .62);
}
.gtg-overlay[hidden] { display: none; }
.gtg-panel {
	width: min(560px, 100%);
	max-height: 100%;
	overflow: auto;
	padding: 20px 22px;
	border: 3px solid var(--gtg-game-ink);
	border-radius: 20px;
	background: var(--gtg-paper);
	color: var(--gtg-game-ink);
	box-shadow: 8px 8px 0 #0F0E22;
	color-scheme: light;
}
.gtg-panel__kicker { margin: 0 0 4px; font: 600 14px var(--gtg-body); color: #5A5778; }
.gtg-panel__title { margin: 0 0 10px; font: 800 32px/1 var(--gtg-display); color: var(--gtg-game-ink); }
.gtg-panel__text { margin: 0 0 12px; font-size: 16px; line-height: 1.55; }
.gtg-panel__sub { margin: 18px 0 6px; font: 800 20px/1.1 var(--gtg-display); color: var(--gtg-game-ink); }
.gtg-panel--menu .gtg-panel__title { margin-bottom: 4px; }
.gtg-panel__more { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #F1EADB; font-size: 15px; line-height: 1.5; }
.gtg-panel__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.gtg-panel__actions--stack { flex-direction: column; align-items: stretch; }
.gtg-panel__actions--answers.gtg-panel__actions--stack .gtg-btn { justify-content: flex-start; height: auto; padding: 10px 16px; text-align: left; line-height: 1.35; white-space: normal; }
.gtg-panel .gtg-btn { --gtg-line: var(--gtg-game-ink); --gtg-shadow: var(--gtg-game-ink); --gtg-surface: #FFFFFF; --gtg-ink: var(--gtg-game-ink); }
.gtg-panel .gtg-btn--primary { background: var(--gtg-amber); color: var(--gtg-game-ink); }
.gtg-panel .gtg-btn:focus-visible { outline: 3px solid var(--gtg-game-ink); box-shadow: 0 0 0 6px var(--gtg-amber); }
.gtg-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.gtg-check input { width: 20px; height: 20px; accent-color: var(--gtg-game-ink); }
.gtg-badge--best { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background: var(--gtg-amber); border: 2px solid var(--gtg-game-ink); font: 800 18px var(--gtg-display); }

.gtg-dialog { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; }
.gtg-dialog__portrait { width: 112px; height: 112px; border: 3px solid var(--gtg-game-ink); border-radius: 16px; background: #EDE6F7; }
.gtg-dialog__name { margin: 0 0 6px; font: 800 22px/1 var(--gtg-display); }
.gtg-dialog__text { margin: 0; font-size: 16px; line-height: 1.55; white-space: pre-line; min-height: 3em; }
.gtg-dialog__extra { margin-top: 12px; }
.gtg-code { padding: 12px 14px; border: 2px dashed var(--gtg-game-ink); border-radius: 14px; background: #FFFFFF; }
.gtg-code__label { margin: 0; font: 600 13px var(--gtg-body); color: #5A5778; }
.gtg-code__value { margin: 2px 0 10px; font: 800 30px/1.1 var(--gtg-display); letter-spacing: .06em; word-break: break-all; }
.gtg-code__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gtg-code__note { margin: 10px 0 0; font-size: 14px; line-height: 1.45; }
.gtg-code__status { min-height: 1.3em; margin: 8px 0 0; font-weight: 600; font-size: 14px; }

.gtg-touch {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 3;
	display: none;
	align-items: flex-end;
	justify-content: space-between;
	padding: 0 14px;
	pointer-events: none;
}
.gtg-shell.has-touch .gtg-touch { display: flex; }
@media (pointer: coarse) { .gtg-touch { display: flex; } }
.gtg-touch[hidden] { display: none !important; }
.gtg-pad {
	position: relative;
	width: 116px;
	height: 116px;
	border: 3px solid rgba(255, 247, 234, .75);
	border-radius: 50%;
	background: rgba(15, 14, 34, .35);
	pointer-events: auto;
	touch-action: none;
}
.gtg-pad[hidden] { visibility: hidden; }
.gtg-pad__knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 3px solid var(--gtg-game-ink); border-radius: 50%; background: var(--gtg-paper); }
.gtg-touch__btns { display: flex; gap: 12px; align-items: flex-end; pointer-events: auto; }
.gtg-tbtn {
	width: 66px;
	height: 66px;
	border: 3px solid var(--gtg-game-ink);
	border-radius: 50%;
	background: var(--gtg-amber);
	color: var(--gtg-game-ink);
	font: 800 22px var(--gtg-display);
	box-shadow: 3px 3px 0 var(--gtg-game-ink);
	touch-action: none;
	cursor: pointer;
}
.gtg-tbtn--b { width: 54px; height: 54px; background: var(--gtg-paper); font-size: 18px; }
.gtg-tbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--gtg-game-ink); }

/* full screen and the bare page (a course item's frame) */
.gtg-stage.is-full .gtg-stage__frame { height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; border: 0; }
.gtg-embed-doc,
.gtg-embed-body { margin: 0; padding: 0; height: 100%; background: #0F0E22; }
.gtg-embed-body .gtg-root { max-width: none; padding: 0; }
.gtg-stage--embed { margin: 0; }
.gtg-stage--embed .gtg-stage__frame { height: 100vh; height: 100svh; max-height: none; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }

/* ---------------------------------------------------- the codes list */

/* On the site's account page the container gives the section its card and fonts; the shortcode's copy brings its own. */
.gtg-codes--card { margin: 0 0 24px; padding: 20px 22px; border: 2px solid var(--gtg-line); border-radius: 16px; background: var(--gtg-surface); }
.gtg-codes__title { margin: 0 0 6px; }
.gtg-codes--card .gtg-codes__title { font: 800 26px/1.05 "Barlow Condensed", "Barlow", system-ui, sans-serif; }
.gtg-codes__lead { margin: 0 0 12px; color: var(--gtg-soft); }
.gtg-codes__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.gtg-codes__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 14px; border: 1.5px dashed var(--gtg-line); border-radius: 12px; }
.gtg-codes__code { font: 800 22px/1 "Barlow Condensed", "Barlow", system-ui, sans-serif; letter-spacing: .06em; }
.gtg-codes__what { display: flex; flex-direction: column; flex: 1 1 200px; gap: 2px; }
.gtg-codes__what span { font-size: 14px; color: var(--gtg-soft); }
.gtg-codes__done { font-weight: 700; }
.gtg-codes__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gtg-codes__hint { font-size: 13px; color: var(--gtg-soft); }
.gtg-codes__msg { font-weight: 600; font-size: 14px; }

/* -------------------------------------------------------------- phones */

@media (max-width: 860px) {
	.gtg-hero,
	.gtg-banner,
	.gtg-campaign { grid-template-columns: 1fr; }
	.gtg-hero { gap: 24px; }
	.gtg-info { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.gtg-root { padding: 16px 16px 40px; }
	.gtg-banner,
	.gtg-campaign { padding: 20px 18px; border-radius: 20px; }
	.gtg-stage__frame { aspect-ratio: 3 / 4; max-height: calc(100svh - 96px); border-radius: 16px; }
	/* The stage is taller than the art on a phone: the whole art sits on top and fades into the stage, with the
	   title, the text and Play below it (darkened behind the mode picker, which reaches up over the art). */
	.gtg-poster__art { bottom: auto; height: auto !important; aspect-ratio: 16 / 9; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
	.gtg-poster::after { background: none; }
	.gtg-poster.is-picking::after { background: linear-gradient(180deg, rgba(15, 14, 34, 0) 0%, rgba(15, 14, 34, .75) 28%, rgba(15, 14, 34, .92) 48%); }
	.gtg-poster__body { padding: 16px 16px 18px; }
	.gtg-poster__tagline { font-size: 15px; }
	.gtg-hud { padding-left: 10px; }
	.gtg-hud__stats { gap: 2px 12px; }
	.gtg-hud__value { font-size: 18px; }
	.gtg-hud__btn { width: 36px; height: 36px; }
	.gtg-meter { width: 54px; }
	.gtg-dialog { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
	.gtg-dialog__portrait { width: 72px; height: 72px; border-radius: 12px; }
	.gtg-panel { padding: 16px; }
	.gtg-panel__title { font-size: 26px; }
	.gtg-toast { font-size: 14px; padding: 6px 10px; top: 8px; }
	.gtg-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.gtg-scene__car-in,
	.gtg-scene__wheel,
	.gtg-scene__puff,
	.gtg-scene__blink { animation: none !important; }
	.gtg-scene__puff { opacity: 0; }
	.gtg-btn,
	.gtg-card,
	.gtg-toast,
	.gtg-meter__fill { transition: none; }
	.gtg-btn:hover,
	.gtg-card:hover { transform: none; }
}