/* Guess This! page: small additions to site.css (chalkboard touches) */

/* Tagline under the game name in the hero h1 */
.hero-sub {
	display: block;
	margin-top: .35em;
	font-size: .4em;
	line-height: 1.25;
	color: var(--accent);
}

/* Hero logo: the JPEG has black corners, lighten makes them vanish on the dark hero */
.guess-hero .game-hero-art { display: flex; justify-content: center; }
.guess-hero .game-hero-art img.guess-logo {
	width: min(100%, 440px);
	border-radius: 0;
	box-shadow: none;
	mix-blend-mode: lighten;
	transform: rotate(-2deg);
}
@media (max-width: 860px) { .guess-hero .game-hero-art img.guess-logo { width: min(80%, 320px); } }

/* Chalkboard section: board texture, darkened so the text stays readable */
.guess-board {
	background:
		linear-gradient(180deg, rgba(11, 18, 34, .78), rgba(11, 18, 34, .55) 30%, rgba(11, 18, 34, .55) 70%, rgba(11, 18, 34, .85)),
		var(--board-img) center / cover no-repeat,
		#1d2a24;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.guess-board h2 { color: #F7F4EC; text-shadow: 0 0 1px rgba(255, 255, 255, .6), 0 2px 18px rgba(0, 0, 0, .5); }
.guess-board .lead, .guess-board .checks li { color: #DDE3DA; }

/* Chalk drawings in wooden frames */
.chalk-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.chalk-frame {
	margin: 0;
	padding: 10px 10px 12px;
	background: linear-gradient(135deg, #8A5A32, #5E3A1E 55%, #7A4E2B);
	border-radius: 10px;
	box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.chalk-frame:nth-child(1) { transform: rotate(-1.5deg); }
.chalk-frame:nth-child(2) { transform: rotate(1.2deg); }
.chalk-frame.wide { grid-column: 1 / -1; transform: rotate(-.6deg); }
.chalk-frame img {
	width: 100%;
	border-radius: 4px;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, .6);
}
.chalk-frame.wide img { max-width: 420px; margin: 0 auto; }
.chalk-frame figcaption {
	padding-top: 8px;
	text-align: center;
	font-family: var(--display);
	font-size: .98rem;
	line-height: 1.3;
	color: #F3E7D3;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
@media (max-width: 480px) { .chalk-frames { gap: 12px; } .chalk-frame figcaption { font-size: .85rem; } }

/* Word chips: a hint of chalk on slate */
.guess-words li { background: #1B2A26; border-color: rgba(255, 255, 255, .14); color: #EDEBE4; }

/* Voice lab: stacked callouts next to the text */
.guess-voice { align-items: start; }
.guess-callouts { display: grid; gap: 14px; }
.guess-callouts .callout h3 { margin-bottom: .35em; }
.guess-callouts .callout p { color: var(--muted); }