/* A-Goal civic games: playing a stop. Scoped to .agoal-play so it cannot
   leak into the rest of the theme. */

.agoal-play {
	--ag-terracotta: #D14622;
	--ag-terracotta-deep: #A8351A;
	--ag-navy: #1B2A41;
	--ag-ochre: #D89B3C;
	--ag-cream: #FBF3E7;
	--ag-cream2: #F3E7D6;
	--ag-paper: #FFFCF7;
	--ag-charcoal: #2A241F;

	--ag-bg: #0B1522;
	--ag-fg: #FBF3E7;
	--ag-fg2: rgba(251, 243, 231, .82);
	--ag-fg3: rgba(251, 243, 231, .58);
	--ag-surface: rgba(251, 243, 231, .06);
	--ag-surface2: rgba(251, 243, 231, .1);
	--ag-line: rgba(251, 243, 231, .16);
	--ag-card-bg: linear-gradient(180deg, #FFFCF7 0%, #F6EDE0 100%);
	--ag-card-fg: #2A241F;
	--ag-card-fg2: #6B6259;
	--ag-card-line: rgba(42, 36, 31, .14);
	--ag-good: #6FBF96;
	--ag-good-bg: rgba(46, 125, 91, .2);
	--ag-good-line: rgba(46, 125, 91, .55);
	--ag-good-solid: #2E7D5B;
	--ag-bad: #F0A68E;
	--ag-accent-soft: rgba(216, 155, 60, .16);
	--ag-accent-line: rgba(216, 155, 60, .5);

	box-sizing: border-box;
	max-width: 640px;
	margin-inline: auto;
	padding: 20px 16px 28px;
	border-radius: 20px;
	background: radial-gradient(640px 380px at 50% -8%, #1B2A41 0%, #0B1522 66%);
	color: var(--ag-fg);
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}

.agoal-play *,
.agoal-play *::before,
.agoal-play *::after { box-sizing: border-box; }

.agoal-play h2,
.agoal-play h3,
.agoal-play h4 {
	font-family: 'Playfair Display', Georgia, serif;
	margin: 0;
	color: var(--ag-fg);
	line-height: 1.16;
}

.agoal-play p { margin: 0; }
.agoal-play :focus-visible { outline: 2px solid var(--ag-ochre); outline-offset: 3px; border-radius: 8px; }

.agoal-play .ag-loading { padding: 40px 0; text-align: center; color: var(--ag-fg3); font-size: 15px; }

/* header */
.agoal-play .ag-hd { display: flex; align-items: center; gap: 9px; }
.agoal-play .ag-pts {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 7px 6px 12px; border-radius: 12px;
	background: var(--ag-bg); border: 1px solid var(--ag-accent-line);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}
.agoal-play .ag-pts svg { width: 14px; height: 14px; color: var(--ag-ochre); }
.agoal-play .ag-pts b {
	font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 700;
	line-height: 1; font-variant-numeric: tabular-nums;
}
.agoal-play .ag-pts u {
	text-decoration: none; padding: 3px 7px; border-radius: 6px;
	background: var(--ag-accent-soft); font-size: 8.5px; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; color: var(--ag-ochre);
}
.agoal-play .ag-stk {
	display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 11px;
	border-radius: 11px; background: var(--ag-good-bg); border: 1px solid var(--ag-good-line);
	font-size: 13px; font-weight: 800; color: var(--ag-good); font-variant-numeric: tabular-nums;
}
.agoal-play .ag-stk svg { width: 13px; height: 13px; }
.agoal-play .ag-stk.off { background: var(--ag-surface); border-color: var(--ag-line); color: var(--ag-fg3); }
.agoal-play .ag-exit {
	margin-left: auto; width: 44px; height: 44px; flex: 0 0 auto;
	display: inline-grid; place-items: center; border-radius: 12px;
	background: var(--ag-cream); color: var(--ag-bg); text-decoration: none;
}
.agoal-play .ag-exit svg { width: 18px; height: 18px; }

/* progress */
.agoal-play .ag-segs { margin-top: 14px; display: flex; gap: 6px; }
.agoal-play .ag-seg { flex: 1; height: 7px; border-radius: 999px; background: var(--ag-line); }
.agoal-play .ag-seg.on { background: var(--ag-ochre); }
.agoal-play .ag-seg.now { background: var(--ag-ochre); box-shadow: 0 0 0 3px var(--ag-accent-soft); }

/* the scenario card */
.agoal-play .ag-lit {
	margin-top: 18px; padding: 22px 20px 24px; border-radius: 20px;
	background: var(--ag-card-bg); color: var(--ag-card-fg);
	border: 1px solid var(--ag-card-line);
	box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .75);
}
.agoal-play .ag-tag {
	display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
	border-radius: 999px; background: var(--ag-navy); color: var(--ag-cream);
	font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.agoal-play .ag-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--ag-ochre); display: block; }
.agoal-play .ag-q { margin-top: 16px; }
.agoal-play .ag-q p { font-size: 18px; line-height: 1.58; color: var(--ag-card-fg); }
.agoal-play .ag-q p + p { margin-top: 10px; }
.agoal-play .ag-ask {
	margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ag-card-line);
	font-size: 15px; font-weight: 800; color: var(--ag-navy);
}

/* options */
.agoal-play .ag-opts { margin-top: 14px; display: grid; gap: 9px; }
.agoal-play .ag-opt {
	display: flex; gap: 12px; align-items: center; width: 100%; min-height: 60px;
	padding: 15px; border-radius: 15px; cursor: pointer; text-align: left;
	border: 1px solid var(--ag-line); background: var(--ag-surface); color: var(--ag-fg);
	font-family: inherit; font-size: 15px; line-height: 1.45; font-weight: 600;
}
.agoal-play .ag-opt i {
	flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid;
	place-items: center; font-size: 14px; font-weight: 800; font-style: normal;
	background: var(--ag-surface2); border: 1px solid var(--ag-line); color: var(--ag-fg3);
}
.agoal-play .ag-opt.sel {
	border: 2px solid var(--ag-ochre); background: var(--ag-accent-soft);
	box-shadow: 0 0 0 4px var(--ag-accent-soft);
}
.agoal-play .ag-opt.sel i { background: var(--ag-ochre); border-color: var(--ag-ochre); color: #3D2905; }

/* buckets */
.agoal-play .ag-zones { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
@media (min-width: 620px) { .agoal-play .ag-zones { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.agoal-play .ag-zone {
	display: flex; flex-direction: column; gap: 7px; min-height: 124px; padding: 16px 14px;
	border-radius: 16px; border: 2px dashed var(--ag-line); background: var(--ag-surface);
	color: var(--ag-fg); font-family: inherit; cursor: pointer; text-align: left;
}
.agoal-play .ag-zone b { font-family: 'Playfair Display', Georgia, serif; font-size: 17px; font-weight: 700; }
.agoal-play .ag-zone span { font-size: 12.5px; line-height: 1.5; color: var(--ag-fg3); }
.agoal-play .ag-zone.sel {
	border: 2px solid var(--ag-ochre); background: var(--ag-accent-soft);
	box-shadow: 0 0 0 4px var(--ag-accent-soft);
}
.agoal-play .ag-hint { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--ag-fg3); }

/* verdict */
.agoal-play .ag-vd { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.agoal-play .ag-vdm {
	flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
	background: linear-gradient(160deg, #4DA67C 0%, #2E7D5B 100%);
	box-shadow: inset 0 3px 7px rgba(255, 255, 255, .3), 0 10px 22px -8px rgba(46, 125, 91, .9);
	color: #FFFCF7;
}
.agoal-play .ag-vdm.bad {
	background: linear-gradient(160deg, #D4603F 0%, #9E2A1A 100%);
	box-shadow: inset 0 3px 7px rgba(255, 255, 255, .3), 0 10px 22px -8px rgba(158, 42, 26, .9);
}
.agoal-play .ag-vdm svg { width: 26px; height: 26px; }
.agoal-play .ag-vd h3 { font-size: 27px; }
.agoal-play .ag-vd small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 700; color: var(--ag-good); }
.agoal-play .ag-vd small.bad { color: var(--ag-bad); }

.agoal-play .ag-why {
	margin-top: 18px; padding: 22px 20px; border-radius: 18px;
	background: var(--ag-card-bg); color: var(--ag-card-fg);
	border: 1px solid var(--ag-card-line); box-shadow: 0 20px 36px -18px rgba(0, 0, 0, .7);
}
.agoal-play .ag-why h4 {
	font-family: inherit; font-size: 10px; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; color: var(--ag-terracotta-deep);
}
.agoal-play .ag-why p { margin-top: 13px; font-size: 15.5px; line-height: 1.65; color: var(--ag-card-fg); }
.agoal-play .ag-law {
	margin-top: 15px; padding: 12px 14px; border-radius: 11px; background: var(--ag-cream2);
	font-size: 12.5px; line-height: 1.55; color: var(--ag-card-fg2);
}
.agoal-play .ag-law b { color: var(--ag-navy); font-weight: 700; }

/* done */
.agoal-play .ag-done { margin-top: 24px; text-align: center; }
.agoal-play .ag-kick { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ag-ochre); }
.agoal-play .ag-done h2 { margin-top: 12px; font-size: clamp(27px, 6vw, 36px); }
.agoal-play .ag-lede { margin-top: 12px; font-size: 15.5px; line-height: 1.65; color: var(--ag-fg2); }
.agoal-play .ag-stats { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.agoal-play .ag-stat { padding: 16px 10px; border-radius: 15px; background: var(--ag-surface); border: 1px solid var(--ag-line); }
.agoal-play .ag-stat b {
	display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 27px;
	font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ag-fg);
}
.agoal-play .ag-stat span { display: block; margin-top: 5px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ag-fg3); }
.agoal-play .ag-stat.gold { background: var(--ag-accent-soft); border-color: var(--ag-accent-line); }
.agoal-play .ag-stat.gold b, .agoal-play .ag-stat.gold span { color: var(--ag-ochre); }

/* footer button */
.agoal-play .ag-ft { margin-top: 18px; }
.agoal-play .ag-btn {
	width: 100%; height: 56px; border: 0; border-radius: 14px; cursor: pointer;
	background: var(--ag-terracotta); color: #FFFCF7; font-family: inherit;
	font-size: 16px; font-weight: 800;
	box-shadow: 0 12px 24px -10px rgba(209, 70, 34, .9);
}
.agoal-play .ag-btn[disabled] {
	background: var(--ag-surface); color: var(--ag-fg3);
	border: 1px solid var(--ag-line); box-shadow: none; cursor: not-allowed;
}
.agoal-play .ag-btn.ghost {
	background: transparent; border: 1px solid rgba(251, 243, 231, .22);
	color: var(--ag-fg2); box-shadow: none; height: 50px; font-size: 15px; font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.agoal-play * { scroll-behavior: auto !important; }
}

/* ---- picker ---- */
.agoal-play .ag-top { margin-top: 22px; text-align: center; }
.agoal-play .ag-top h2 { margin-top: 12px; font-size: clamp(27px, 6vw, 38px); }
.agoal-play .ag-top .ag-lede { margin-top: 13px; max-width: 48ch; margin-inline: auto; }

.agoal-play .ag-group { margin-top: 30px; }
.agoal-play .ag-group-h { padding-bottom: 13px; border-bottom: 1px solid var(--ag-line); }
.agoal-play .ag-group-h h3 {
	font-size: 20px; font-weight: 700; color: var(--ag-ochre);
	font-family: 'Playfair Display', Georgia, serif;
}
.agoal-play .ag-group-h p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--ag-fg3); }

.agoal-play .ag-cards { margin-top: 13px; display: grid; gap: 10px; }
@media (min-width: 620px) { .agoal-play .ag-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.agoal-play .ag-card {
	display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 19px 20px;
	border-radius: 16px; border: 1px solid var(--ag-line); background: var(--ag-surface);
	color: var(--ag-fg); font-family: inherit; text-align: left; cursor: pointer;
}
.agoal-play .ag-card:hover { border-color: var(--ag-accent-line); background: var(--ag-surface2); }
.agoal-play .ag-card b {
	font-family: 'Playfair Display', Georgia, serif; font-size: 20px;
	font-weight: 700; line-height: 1.22;
}
.agoal-play .ag-card-blurb { font-size: 13.5px; line-height: 1.6; color: var(--ag-fg3); }
.agoal-play .ag-card-foot {
	margin-top: auto; padding-top: 10px; display: flex; align-items: center;
	justify-content: space-between; gap: 10px;
}
.agoal-play .ag-card-foot em {
	font-style: normal; font-size: 10.5px; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; color: var(--ag-fg3);
}
.agoal-play .ag-card-go {
	width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid;
	place-items: center; background: var(--ag-accent-soft); color: var(--ag-ochre);
}
.agoal-play .ag-card-go svg { width: 15px; height: 15px; }

/* ---- breadcrumb back to the picker ---- */
.agoal-play .ag-crumb { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agoal-play .ag-back {
	padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ag-line);
	background: transparent; color: var(--ag-fg3); font-family: inherit;
	font-size: 12px; font-weight: 700; cursor: pointer;
}
.agoal-play .ag-back:hover { color: var(--ag-fg); border-color: var(--ag-accent-line); }
.agoal-play .ag-crumb span {
	font-size: 12px; font-weight: 800; letter-spacing: .08em;
	text-transform: uppercase; color: var(--ag-ochre);
}

/* ---- name ---- */
.agoal-play .ag-nameform { margin-top: 22px; display: grid; gap: 11px; }
.agoal-play .ag-fld {
	width: 100%; height: 58px; padding: 0 18px; border-radius: 13px;
	border: 1.5px solid var(--ag-line); background: var(--ag-surface);
	color: var(--ag-fg); font-family: inherit; font-size: 17px;
}
.agoal-play .ag-fld::placeholder { color: var(--ag-fg3); }
.agoal-play .ag-fld:focus { border-color: var(--ag-ochre); outline: none; box-shadow: 0 0 0 4px var(--ag-accent-soft); }
.agoal-play .ag-plain {
	display: block; margin: 14px auto 0; padding: 8px 4px; border: 0; background: none;
	color: var(--ag-fg2); font-family: inherit; font-size: 14px; font-weight: 700;
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.agoal-play .ag-note {
	margin-top: 18px; padding: 15px 17px; border-radius: 12px;
	background: var(--ag-surface); border: 1px solid var(--ag-line);
	font-size: 13px; line-height: 1.65; color: var(--ag-fg3);
}

/* ---- campaign momentum (the trail) ---- */
.agoal-play .ag-mom {
	margin-top: 14px; padding: 14px 16px; border-radius: 14px;
	background: var(--ag-surface); border: 1px solid var(--ag-line);
}
.agoal-play .ag-mom-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.agoal-play .ag-mom-top span {
	font-size: 10px; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; color: var(--ag-fg3);
}
.agoal-play .ag-mom-top b {
	font-family: 'Playfair Display', Georgia, serif; font-size: 23px;
	font-weight: 700; line-height: 1; color: var(--ag-fg); font-variant-numeric: tabular-nums;
}
.agoal-play .ag-mom-track {
	display: block; margin-top: 10px; height: 10px; border-radius: 999px;
	background: var(--ag-line); overflow: hidden;
}
.agoal-play .ag-mom-track i {
	display: block; height: 100%; border-radius: 999px;
	background: var(--ag-good-solid); transition: width .45s ease;
}
.agoal-play .ag-mom-track i.mid { background: var(--ag-ochre); }
.agoal-play .ag-mom-track i.low { background: #B3291C; }

/* the lesson panel under a trail outcome */
.agoal-play .ag-pnl {
	margin-top: 14px; padding: 20px 22px; border-radius: 16px;
	background: var(--ag-surface); border: 1px solid var(--ag-line);
}
.agoal-play .ag-pnl h4 {
	font-family: inherit; font-size: 10px; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; color: var(--ag-ochre);
}
.agoal-play .ag-pnl p { margin-top: 12px; font-size: 14.5px; line-height: 1.68; color: var(--ag-fg2); }
.agoal-play .ag-pnl .ag-law { background: rgba(251,243,231,.07); color: var(--ag-fg3); }
.agoal-play .ag-pnl .ag-law b { color: var(--ag-fg); }

.agoal-play .ag-warn {
	margin-top: 16px; padding: 15px 17px; border-radius: 12px;
	background: var(--ag-bad-bg); border: 1px solid var(--ag-bad-line);
	font-size: 13.5px; line-height: 1.6; color: var(--ag-bad);
}

/* which part of the document a game comes from */
.agoal-play .ag-card-kick {
	font-size: 9.5px; font-weight: 800; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ag-ochre);
}

/* ---- the name field ----
   Chrome styles a field it thinks it can autofill, and its text colour beats
   an ordinary `color` rule, which left the typed name near invisible on the
   dark panel. -webkit-text-fill-color is the only thing that overrides it, and
   the inset shadow is the standard way to hold the background. The field is a
   solid colour rather than the translucent surface so the two always match. */
.agoal-play .ag-fld {
	background: #18232F;
	color: var(--ag-fg);
	-webkit-text-fill-color: var(--ag-fg);
	caret-color: var(--ag-ochre);
}
.agoal-play .ag-fld::placeholder { color: var(--ag-fg3); -webkit-text-fill-color: var(--ag-fg3); opacity: 1; }
.agoal-play .ag-fld:-webkit-autofill,
.agoal-play .ag-fld:-webkit-autofill:hover,
.agoal-play .ag-fld:-webkit-autofill:focus,
.agoal-play .ag-fld:-webkit-autofill:active {
	-webkit-text-fill-color: var(--ag-fg);
	caret-color: var(--ag-ochre);
	-webkit-box-shadow: 0 0 0 1000px #18232F inset;
	box-shadow: 0 0 0 1000px #18232F inset;
	transition: background-color 9999s ease-in-out 0s;
}
.agoal-play .ag-fld:focus { background: #18232F; }

/* ---- holding our own hover and focus states ----
   Elementor's kit stylesheet styles every `button:hover` and `button:focus` on
   the site and inverts them to white on terracotta. Its selector carries more
   weight than a plain class, so every control in here flipped on hover, and on
   a phone stayed flipped after a tap. Each state below is declared explicitly
   with three classes, which outranks it. */
.agoal-play .ag-btn:hover,
.agoal-play .ag-btn:focus,
.agoal-play .ag-btn:active {
	background: var(--ag-terracotta-deep);
	color: #FFFCF7;
	border: 0;
}
.agoal-play .ag-btn[disabled]:hover,
.agoal-play .ag-btn[disabled]:focus {
	background: var(--ag-surface);
	color: var(--ag-fg3);
	border: 1px solid var(--ag-line);
}
.agoal-play .ag-btn.ghost:hover,
.agoal-play .ag-btn.ghost:focus,
.agoal-play .ag-btn.ghost:active {
	background: var(--ag-surface);
	color: var(--ag-fg);
	border: 1px solid var(--ag-ghost-line, rgba(251, 243, 231, .35));
}

.agoal-play .ag-opt:hover,
.agoal-play .ag-opt:focus {
	background: var(--ag-surface2);
	color: var(--ag-fg);
	border: 1px solid var(--ag-accent-line);
}
.agoal-play .ag-opt.sel:hover,
.agoal-play .ag-opt.sel:focus {
	background: var(--ag-accent-soft);
	color: var(--ag-fg);
	border: 2px solid var(--ag-ochre);
}

.agoal-play .ag-zone:hover,
.agoal-play .ag-zone:focus {
	background: var(--ag-surface2);
	color: var(--ag-fg);
	border: 2px dashed var(--ag-accent-line);
}
.agoal-play .ag-zone.sel:hover,
.agoal-play .ag-zone.sel:focus {
	background: var(--ag-accent-soft);
	color: var(--ag-fg);
	border: 2px solid var(--ag-ochre);
}

.agoal-play .ag-card:hover,
.agoal-play .ag-card:focus {
	background: var(--ag-surface2);
	color: var(--ag-fg);
	border: 1px solid var(--ag-accent-line);
}

.agoal-play .ag-back:hover,
.agoal-play .ag-back:focus {
	background: transparent;
	color: var(--ag-fg);
	border: 1px solid var(--ag-accent-line);
}

.agoal-play .ag-plain:hover,
.agoal-play .ag-plain:focus {
	background: none;
	color: var(--ag-fg);
	border: 0;
}

.agoal-play .ag-exit:hover,
.agoal-play .ag-exit:focus {
	background: var(--ag-cream);
	color: var(--ag-bg);
}

/* the correct answer, revealed after a wrong one */
.agoal-play .ag-ans {
	margin-top: 18px; padding: 18px 20px; border-radius: 18px;
	background: rgba(216, 155, 60, .1); border: 1px solid rgba(216, 155, 60, .34);
}
.agoal-play .ag-ans h4 {
	font-family: inherit; font-size: 10px; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; color: var(--ag-ochre);
}
.agoal-play .ag-ans-list { margin: 11px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.agoal-play .ag-ans-list li {
	font-size: 15px; line-height: 1.55; font-weight: 600; color: var(--ag-fg);
}