/* ===== Anyone’s Game · Mixed Pieces ===== */
:root {
	--ag-ink: #1E1B3A;
	--ag-table: #F2F4F7;
	--ag-card: #FFFFFF;
	--ag-muted: #45425E;
	--ag-line: #E1E4EC;
	--ag-edge: #DDE1EA;
	--ag-tomato: #E8483B;
	--ag-marigold: #F5B100;
	--ag-teal: #0F9488;
	--ag-dark-teal: #0B7C72;
	--ag-cobalt: #2E66E0;
	--ag-grape: #7646D6;
	--ag-display: "Bricolage Grotesque", Figtree, system-ui, sans-serif;
	--ag-body: Figtree, system-ui, sans-serif;
	--ag-shadow: 0 .6em 1.6em rgba(30, 27, 58, .06);
}

body { -webkit-font-smoothing: antialiased; }
b, strong { font-weight: 800; }
::selection { background: #FDE7A6; color: var(--ag-ink); }
:focus-visible { outline: .2em solid var(--ag-cobalt); outline-offset: .15em; border-radius: .3em; }

/* ===== Wordmark and shelf ===== */
.ag-wm { font-family: var(--ag-display); font-weight: 800; letter-spacing: -.045em; line-height: .92; color: var(--ag-ink); white-space: nowrap; display: inline-block; }
.ag-wm .ag-nb { white-space: nowrap; }
.ag-wm .pawn { height: .52em; width: auto; vertical-align: top; margin: .03em .01em 0 .05em; }
.ag-logo a { text-decoration: none; color: inherit; }
.ag-logo .ag-wm { font-size: 1.65rem; }

.ag-shelf { display: inline-flex; align-items: flex-end; gap: .18em; border-bottom: .07em solid var(--ag-ink); padding: 0 .12em; font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 0; }
.ag-shelf svg { height: 1em; width: auto; display: block; }
.ag-shelf .ag-piece-die { height: .72em; }
.ag-shelf .ag-piece-card { height: .88em; transform: rotate(-8deg); transform-origin: bottom center; }
.ag-shelf .ag-piece-token { height: .58em; }
.ag-shelf .ag-piece-buzzer { height: .64em; }
.ag-shelf .ag-piece-pawn2 { height: .8em; }
.ag-shelf-sm { font-size: 1.6rem; }

/* The one orchestrated moment: the friends arrive on the shelf, one by one. */
@media (prefers-reduced-motion: no-preference) {
	.ag-hero .ag-shelf svg { animation: ag-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
	.ag-hero .ag-shelf svg:nth-child(2) { animation-delay: .08s; }
	.ag-hero .ag-shelf svg:nth-child(3) { animation-delay: .16s; }
	.ag-hero .ag-shelf svg:nth-child(4) { animation-delay: .24s; }
	.ag-hero .ag-shelf svg:nth-child(5) { animation-delay: .32s; }
	.ag-hero .ag-shelf svg:nth-child(6) { animation-delay: .4s; }
	.ag-hero .ag-shelf .ag-piece-card { animation-name: ag-pop-tilt; }
}
@keyframes ag-pop { from { transform: translateY(.3em) scale(0); } to { transform: none; } }
@keyframes ag-pop-tilt { from { transform: translateY(.3em) scale(0); } to { transform: rotate(-8deg); } }

/* ===== Hero ===== */
.ag-hero { text-align: center; }
.ag-hero h1.ag-hero-title { font-size: var(--wp--preset--font-size--giant); margin: 0; }
.ag-hero h1 .ag-wm { white-space: normal; }
.ag-hero .ag-tag { font-size: clamp(1.15rem, 2.4vw, 1.6rem); color: var(--ag-muted); margin-top: .8rem; text-wrap: balance; }

/* ===== Buttons: rounded, with a darker bottom edge so they feel pressable ===== */
.wp-block-button__link,
.wp-element-button {
	border: 0;
	border-bottom: .3em solid #C48D00;
	transition: transform .08s;
	text-decoration: none;
}
.wp-block-button__link:hover,
.wp-element-button:hover { filter: brightness(1.04); }
.wp-block-button__link:active,
.wp-element-button:active { transform: translateY(.15em); border-bottom-width: .2em; }

.wp-block-button.is-style-tomato .wp-block-button__link { background: var(--ag-tomato); color: #fff; border-bottom-color: #B3352B; font-size: 1.15em; padding-left: 1.6em; padding-right: 1.6em; }
.wp-block-button.is-style-go .wp-block-button__link { background: var(--ag-dark-teal); color: #fff; border-bottom-color: #075A53; }
.wp-block-button.is-style-white .wp-block-button__link { background: #fff; color: var(--ag-ink); border-bottom-color: #D3D8E3; }
.wp-block-button.is-style-ink .wp-block-button__link { background: var(--ag-ink); color: #fff; border-bottom-color: #000; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--ag-ink); border: .15em solid var(--ag-ink); border-bottom-width: .3em; }

/* ===== Cards and tiles ===== */
.is-style-card,
.ag-card {
	background: var(--ag-card);
	border-radius: 1.2em;
	border-bottom: .35em solid var(--ag-edge);
	box-shadow: var(--ag-shadow);
	padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 1.8rem);
}
.wp-block-column.is-style-card { padding: clamp(1.1rem, 3vw, 1.6rem); }

.is-style-tile,
.ag-tile {
	background: var(--ag-card);
	border-radius: 1.2em;
	border-bottom: .5em solid var(--ag-edge);
	overflow: hidden;
	transition: transform .15s;
}
/* The app’s game-tile hover: a little tilt, like picking up a card. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.is-style-tile:hover, .ag-tile:hover, .is-style-tiles .wp-block-image:hover, .wp-block-image.is-style-tile:hover { transform: rotate(-2deg) scale(1.04); }
	.is-style-tile:nth-child(even):hover, .ag-tile:nth-child(even):hover, .is-style-tiles .wp-block-image:nth-child(even):hover { transform: rotate(2deg) scale(1.04); }
}
.ag-thumb { aspect-ratio: 16 / 10; display: grid; place-items: center; font-size: 4.2rem; line-height: 1; margin: 0 !important; }
.ag-tile-body { padding: .9em 1.1em 1.1em; }
.ag-tile-body > * { margin: 0; }
.ag-tile-body > * + * { margin-top: .35em; }

/* Images and the gallery: white frame, thicker bottom edge */
.wp-block-image.is-style-tile img,
.is-style-tiles.wp-block-gallery .wp-block-image img { border-radius: .9em; }
.wp-block-image.is-style-tile,
.is-style-tiles.wp-block-gallery .wp-block-image { background: #fff; padding: .5em .5em .9em; border-radius: 1.2em; border-bottom: .35em solid var(--ag-edge); box-shadow: var(--ag-shadow); transition: transform .15s; }
.is-style-tiles.wp-block-gallery .wp-block-image figcaption { position: static; background: none; color: var(--ag-ink); font-weight: 800; padding: .5em .2em 0; text-align: left; font-size: .95rem; }

/* Details as cards (FAQ) */
.wp-block-details.is-style-card summary { font-weight: 800; font-size: 1.15rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1em; }
.wp-block-details.is-style-card summary::-webkit-details-marker { display: none; }
.wp-block-details.is-style-card summary::after { content: "+"; font-family: var(--ag-display); font-size: 1.6em; line-height: .7; color: var(--ag-tomato); }
.wp-block-details.is-style-card[open] summary::after { content: "−"; }
.wp-block-details.is-style-card[open] summary { margin-bottom: .6em; }

/* Section colours from the piece tints */
.ag-band { border-radius: 1.6em; }

/* ===== Header ===== */
.ag-header { border-bottom: 2px solid var(--ag-line); }
.ag-header .wp-block-navigation a { text-decoration: none; }
.ag-header .wp-block-navigation a:hover { text-decoration: underline; text-decoration-thickness: .15em; text-underline-offset: .3em; text-decoration-color: var(--ag-marigold); }
.ag-header .wp-block-navigation .current-menu-item > a { text-decoration: underline; text-decoration-thickness: .15em; text-underline-offset: .3em; text-decoration-color: var(--ag-tomato); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--ag-table) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-family: var(--ag-display); font-size: 2rem; letter-spacing: -.03em; }

/* ===== Footer ===== */
.ag-footer { background: var(--ag-card); border-top: 2px solid var(--ag-line); }
.ag-footer a { text-decoration: none; }
.ag-footer a:hover { text-decoration: underline; }
.ag-footer .ag-small { color: var(--ag-muted); font-size: .9rem; }

/* ===== Text helpers ===== */
.ag-muted { color: var(--ag-muted); }
.ag-lede { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--ag-muted); max-width: 38em; text-wrap: pretty; }
.ag-note { background: #FFF1C7; border: 2px dashed var(--ag-marigold); border-radius: .8em; padding: .7em 1em; font-size: .95rem; }
.ag-big-number { font-family: var(--ag-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
h1, h2, h3 { text-wrap: balance; }

/* ===== Forms (search, comments, plugins) ===== */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], select, textarea {
	font: inherit;
	color: var(--ag-ink);
	background: #fff;
	border: .15em solid #D3D8E3;
	border-radius: .8em;
	padding: .55em .8em;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ag-cobalt); }

/* ===== Posts ===== */
.wp-block-post-date, .wp-block-post-terms { color: var(--ag-muted); font-size: .95rem; }
.wp-block-post-featured-image img { border-radius: 1.2em; }
.wp-block-query .wp-block-post { list-style: none; }
.wp-block-query-pagination a { text-decoration: none; font-weight: 800; }

@media (max-width: 600px) {
	.ag-logo .ag-wm { font-size: 1.35rem; }
	.ag-header .ag-header-cta { display: none; }
}

/* ===== Email signup ===== */
.ag-why-piece { border: 0; padding: 0; font-size: 2.2rem; flex: none; width: 1.1em; justify-content: center; }
.ag-why h3 { margin: 0; }
.ag-why p { margin: 0; }
.ag-signup-form { border-bottom-color: var(--ag-marigold); }
/* If the Reach form renders on the page (not in a frame), give it the app’s fields and pressable button. */
.ag-signup-form form { display: grid; gap: .8rem; }
.ag-signup-form input[type="email"], .ag-signup-form input[type="text"] { width: 100%; font-size: 1.1rem; }
.ag-signup-form button, .ag-signup-form input[type="submit"] {
	font: inherit; font-weight: 800; font-size: 1.15rem; cursor: pointer;
	background: var(--ag-tomato); color: #fff; border: 0; border-bottom: .3em solid #B3352B; border-radius: 1em; padding: .65em 1.4em;
}
.ag-signup-form button:active, .ag-signup-form input[type="submit"]:active { transform: translateY(.15em); border-bottom-width: .2em; }
.ag-signup-band h2 { margin: 0; }
.ag-signup-band p { margin: 0; }

/* [ag_piece] icons */
.ag-piece-icon { border: 0; padding: 0; vertical-align: bottom; }
p:has(> .ag-piece-icon:only-child) { margin: 0; line-height: 0; }
.ag-shelf-wrap { display: block; line-height: 0; }