/* ===========================================================================
   Mosaic Summer Bingo — standalone landing page.
   Rendered by the plugin's own template (templates/game-page.php); no theme
   header/footer or Elementor layout is used. Design tokens + section styles
   are taken from the Figma "Mosaic" file. The board/form/button rules near the
   bottom keep their !important guards so that, should the host theme or an
   Elementor Kit stylesheet still load via wp_head(), it can't restyle the game.
   =========================================================================== */

:root {
	--sb-blue: #3c61c6;
	--sb-blue-dark: #2f4ea6;
	--sb-ink: #0b0d0c;
	--sb-paper: #f4f5f1;
	--sb-gold: #ebcd32;
	--sb-gold-ink: #412402;
	--sb-green: #7dce91;
	--sb-gray: #a8aca0;
	--sb-square-border: #b4b2a9;
	--sb-muted: #5f5e5a;
	--sb-serif: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
	--sb-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.sb-game-page {
	margin: 0;
	padding: 0;
	background: #fff;
	color: var(--sb-ink);
	font-family: var(--sb-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.sb-lp, .sb-lp *, .sb-lp *::before, .sb-lp *::after { box-sizing: border-box; }
.sb-lp img { max-width: 100%; }

.sb-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; }
.sb-section { padding: 72px 0; }
.sb-center { text-align: center; }

/* Shared type */
.sb-h2 {
	font-family: var(--sb-serif);
	font-weight: 500;
	color: var(--sb-ink);
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	line-height: 1.08;
	margin: 0;
	text-align: center;
}
.sb-h3 {
	font-family: var(--sb-serif);
	font-weight: 600;
	color: var(--sb-ink);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.15;
	margin: 0;
}
.sb-eyebrow {
	font-family: var(--sb-body);
	font-weight: 500;
	color: var(--sb-blue);
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 1.05rem;
	margin: 0;
	text-align: center;
}
.sb-eyebrow--light { color: #fff; font-weight: 700; font-size: .82rem; }
.sb-lede { color: var(--sb-ink); font-size: 1.05rem; margin: .5rem 0 0; }

/* ---- Hero ---- */
.sb-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 560px;
	background-image: var(--sb-hero-img);
	background-size: cover;
	background-position: center 30%;
	background-color: #3f3f3f;
	text-align: center;
	overflow: hidden;
}
.sb-hero-overlay { position: absolute; inset: 0; background: rgba(63,63,63,.7); }
.sb-hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	color: #fff;
	max-width: 1000px;
	padding: 80px 24px;
}
.sb-hero-mark { width: 96px; height: 96px; display: block; }
.sb-hero-title {
	font-family: var(--sb-serif);
	font-weight: 500;
	font-size: clamp(2.4rem, 6vw, 4.6rem);
	line-height: 1.04;
	margin: 0;
	max-width: 15ch;
	color: #fff;
}
.sb-hero-sub {
	font-family: var(--sb-body);
	font-size: clamp(1rem, 2vw, 1.25rem);
	line-height: 1.5;
	margin: 0;
	max-width: 600px;
	color: #fff;
}

/* ---- How to Play ---- */
.sb-howto { background: #fff; }
.sb-howto-inner { display: flex; flex-direction: column; align-items: center; gap: 34px; text-align: center; }
.sb-howto-inner .sb-eyebrow { margin-bottom: 4px; }
.sb-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; max-width: 1200px; }
.sb-step {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	text-align: left;
	padding: 26px;
	border-radius: 14px;
	border-left: 5px solid;
}
.sb-step--green { background: #ebf7ed; border-left-color: var(--sb-green); }
.sb-step--blue  { background: #e0e6f5; border-left-color: var(--sb-blue); }
.sb-step-num { font-family: var(--sb-serif); font-weight: 700; font-size: 1.4rem; line-height: 1; }
.sb-step--green .sb-step-num { color: var(--sb-green); }
.sb-step--blue .sb-step-num { color: var(--sb-blue); }
.sb-step p { margin: 0; color: #3b3d38; font-weight: 500; font-size: 1rem; }

/* ---- Board section ---- */
.sb-board-section { background: #fff; padding-top: 24px; }
.sb-board-section .sb-card { max-width: 860px; margin: 0 auto; }

/* ---- How to Play (challenges + ways to share) ---- */
.sb-share { background: var(--sb-paper); }
.sb-section-head { text-align: center; margin-bottom: 40px; }
.sb-bullets {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1200px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 32px;
}
.sb-bullet { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.sb-bullet-icon { flex: 0 0 auto; color: var(--sb-blue); }
.sb-bullet-icon svg { width: 22px; height: 22px; display: block; }
.sb-bullet-text { font-size: 1rem; color: var(--sb-ink); }
.sb-bullet-text strong { font-weight: 700; }
.sb-bullet-text a { color: var(--sb-blue); font-weight: 600; text-decoration: underline; }
.sb-bullet-sub { display: block; color: var(--sb-muted); font-size: .93rem; margin-top: 2px; }
.sb-share-note {
	max-width: 640px;
	margin: 40px auto 0;
	text-align: center;
	font-weight: 500;
	color: var(--sb-ink);
}

/* ---- Weekly Challenges cards ---- */
.sb-weekly { background: var(--sb-paper); }
.sb-weekly .sb-h3 { margin-bottom: 32px; }
.sb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1200px; margin: 0 auto; }
.sb-cardw {
	display: flex;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	min-height: 280px;
}
.sb-cardw-text {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 30px;
}
.sb-cardw-text--gold  { background: var(--sb-gold); }
.sb-cardw-text--green { background: var(--sb-green); }
.sb-cardw-title { font-family: var(--sb-serif); font-weight: 600; font-size: 1.35rem; margin: 0; color: var(--sb-ink); }
.sb-cardw-text p { margin: 0; font-weight: 500; font-size: 1rem; color: #0f120d; }
.sb-cardw-link { font-weight: 700; color: var(--sb-ink); text-decoration: underline; font-size: 1rem; }
.sb-cardw-photo { flex: 1 1 50%; background-size: cover; background-position: center; min-height: 200px; }

/* ---- Stay Connected ---- */
.sb-connect { background: #fff; }
.sb-connect .sb-h3 { margin-bottom: 32px; }
.sb-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1200px; margin: 0 auto; }
.sb-linkcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	padding: 26px 22px;
	border: 1.5px solid #e0e3db;
	border-radius: 14px;
	text-decoration: none;
	color: var(--sb-ink);
	transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.sb-linkcard:hover { border-color: var(--sb-blue); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(11,13,12,.06); }
.sb-linkcard-icon { color: var(--sb-blue); }
.sb-linkcard-icon svg { width: 34px; height: 34px; display: block; }
.sb-linkcard-title { font-family: var(--sb-serif); font-weight: 600; font-size: 1.12rem; }
.sb-linkcard-sub { color: #6b6b66; font-weight: 500; font-size: 1rem; }

/* ---- Outschool banner ---- */
.sb-outschool { background: var(--sb-blue); }
.sb-outschool-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 640px; margin: 0 auto; padding: 0 24px; }
.sb-outschool-title { color: #fff; font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); }
.sb-outschool-sub { color: #dbe3f5; font-weight: 500; margin: 0; max-width: 560px; }
.sb-pill {
	background: #fff;
	color: var(--sb-blue);
	font-weight: 600;
	font-size: 1.05rem;
	text-decoration: none;
	padding: 15px 30px;
	border-radius: 999px;
	margin-top: 4px;
	transition: transform .1s ease, box-shadow .15s ease;
}
.sb-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }

/* ---- Footer ---- */
.sb-footer { background: var(--sb-ink); padding: 52px 24px; text-align: center; }
.sb-footer p { margin: 0 auto; max-width: 520px; color: #d9dbd6; font-weight: 500; font-size: 1rem; }

/* ===========================================================================
   Interactive game: sign-in form, board, BINGO button.
   Scoped to .sb-app with !important guards (see header note).
   =========================================================================== */
.sb-app { font-family: var(--sb-body); color: var(--sb-ink); }
.sb-app, .sb-app *, .sb-app *::before, .sb-app *::after { box-sizing: border-box; }

/* --- first-visit: sign-in card floating over the empty board --- */
.sb-board-stack { position: relative; }
.sb-signin-overlay {
	position: absolute;
	inset: 0;
	z-index: 10; /* paint above the board's .sb-square-text (z-index:1) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	pointer-events: none;
}
.sb-signin-panel {
	background: rgba(0, 0, 0, .5);
	padding: 50px;
	border-radius: 20px;
	max-width: 100%;
	pointer-events: auto;
}

/* --- sign-in card (title + text + form all on white) --- */
.sb-signin {
	background: #fff;
	max-width: 440px;
	width: 100%;
	margin: 0;
	padding: 32px;
	border-radius: 16px;
	box-shadow: 0 16px 48px rgba(0,0,0,.28);
	text-align: center;
}
.sb-signin-title { font-family: var(--sb-serif); font-weight: 600; font-size: 1.6rem; margin: 0 0 .35rem; }
.sb-signin p { margin: 0 0 1.25rem; color: var(--sb-muted); }
.sb-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background: transparent;
	padding: 0;
	border: 0;
	box-shadow: none;
	text-align: left;
}
.sb-form label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .95rem; }
.sb-form input { padding: .7rem .9rem; border: 1px solid var(--sb-square-border); border-radius: 9px; font-size: 1rem; }
.sb-form input:focus { outline: none; border-color: var(--sb-blue); box-shadow: 0 0 0 3px rgba(60,97,198,.2); }

.sb-btn {
	background: var(--sb-blue);
	color: #fff;
	border: 0;
	border-radius: 9px;
	padding: .8rem 1.2rem;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, transform .05s ease;
}
.sb-btn:hover { background: var(--sb-blue-dark); }
.sb-btn:active { transform: translateY(1px); }
.sb-btn[disabled] { opacity: .6; cursor: default; }

.sb-message { min-height: 1.2em; margin: .25rem 0 0; text-align: center; font-weight: 600; }
.sb-message.is-error { color: #c02626; }
.sb-message.is-ok { color: var(--sb-blue); }

/* --- greeting --- */
.sb-greeting { text-align: center; margin: 0 0 1rem; font-size: .95rem; }
.sb-signout { margin-left: .35rem; color: var(--sb-blue); }

/* --- card frame + board --- */
.sb-card {
	position: relative;
	background: var(--sb-paper);
	border-radius: 24px;
	padding: 20px;
}

/* expand / exit toggle — blue circle hanging off the card's top-right corner.
   !important guards so a host theme / Elementor Kit button style can't leak in
   (this control also renders in the signed-out preview, outside .sb-app). */
.sb-card .sb-fullscreen-btn {
	position: absolute !important;
	top: -16px;
	right: -16px;
	z-index: 4;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background: var(--sb-blue) !important;
	border: 0 !important;
	border-radius: 50% !important;
	color: #fff !important;
	cursor: pointer !important;
	box-shadow: 0 4px 12px rgba(11,13,12,.18) !important;
	transition: background .15s ease, transform .1s ease;
}
.sb-card .sb-fullscreen-btn:hover { background: var(--sb-blue-dark) !important; }
.sb-card .sb-fullscreen-btn:active { transform: scale(.94); }
.sb-card .sb-fullscreen-btn:focus-visible { outline: 2px solid var(--sb-blue); outline-offset: 2px; }
.sb-card.is-fullscreen .sb-fullscreen-btn { top: 16px; right: 16px; }
.sb-fs-icon {
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

.sb-fs-enter { -webkit-mask-image: url("../img/fullscreen.svg"); mask-image: url("../img/fullscreen.svg"); }
.sb-fs-exit  { display: none; -webkit-mask-image: url("../img/fullscreen-exit.svg"); mask-image: url("../img/fullscreen-exit.svg"); }
.sb-card.is-fullscreen .sb-fs-enter { display: none; }
.sb-card.is-fullscreen .sb-fs-exit { display: block; }

/* expanded: card fills the browser window (not the monitor), board scaled up */
.sb-card.is-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: none;
	margin: 0;
	padding: min(5vh, 48px) min(5vw, 48px);
	border-radius: 0;
	background: var(--sb-paper);
	overflow: auto;
}
.sb-card.is-fullscreen .sb-bingo-header,
.sb-card.is-fullscreen .sb-board { width: min(92vw, 66vh); }
.sb-card.is-fullscreen .sb-bingo-letter { font-size: clamp(2rem, 8vh, 4.5rem); }
.sb-card.is-fullscreen .sb-square { font-size: clamp(.72rem, 1.53vh, 1.26rem) !important; }
.sb-bingo-header { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.sb-bingo-letter {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: .25rem 0 0;
	font-family: var(--sb-serif);
	font-weight: 900;
	line-height: 1;
	font-size: clamp(1.6rem, 6vw, 3.4rem);
}
.sb-bingo-letter:nth-child(1) { color: var(--sb-blue); }
.sb-bingo-letter:nth-child(2) { color: var(--sb-gold); }
.sb-bingo-letter:nth-child(3) { color: var(--sb-green); }
.sb-bingo-letter:nth-child(4) { color: var(--sb-gray); }
.sb-bingo-letter:nth-child(5) { color: var(--sb-ink); }

.sb-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sb-square {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10px 12px;
	border: 1px solid var(--sb-square-border);
	border-radius: 4px;
	background: #fff;
	color: var(--sb-ink);
	font-family: var(--sb-body);
	font-size: clamp(.55rem, 1.7vw, .82rem);
	line-height: 1.18;
	font-weight: 400;
	overflow: hidden;
	transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
button.sb-square { cursor: pointer; }
button.sb-square:hover:not([disabled]) { border-color: var(--sb-blue); transform: translateY(-2px); }
.sb-square.is-checked { background: var(--sb-blue); border-color: var(--sb-blue); color: #fff; font-weight: 500; }
.sb-square.is-free { background: var(--sb-gold); border-color: var(--sb-gray); color: var(--sb-gold-ink); font-weight: 500; cursor: default; }
.sb-square-text { position: relative; z-index: 1; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }

/* --- bingo button --- */
.sb-bingo-wrap { text-align: center; margin-top: 1.25rem; }
.sb-bingo-btn { font-size: 1.15rem; padding: 1rem 2rem; animation: sb-pulse 1.1s ease-in-out infinite; }
.sb-bingo-btn[hidden] { display: none; }

/* Expanded view: the "Click to yell BINGO!" wrap is a sibling OUTSIDE .sb-card,
   so when the card becomes a fixed fullscreen overlay the button sits behind it
   and is unreachable. When expanded AND won, pin the wrap as a bar floating over
   the overlay so it's always visible. (setExpanded()/reflectWin() in public.js
   toggle .sb-is-expanded / .sb-has-win on the .sb-game container.) */
.sb-game.sb-is-expanded.sb-has-win .sb-bingo-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000; /* above .sb-card.is-fullscreen (z-index 99999) */
	margin: 0;
	padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	background: linear-gradient(to top, var(--sb-paper) 60%, rgba(244, 245, 241, 0));
	pointer-events: none; /* clicks pass through the bar, except the button/message */
}
.sb-game.sb-is-expanded.sb-has-win .sb-bingo-wrap > * { pointer-events: auto; }
/* keep the scaled-up board clear of the pinned bar so its bottom row shows */
.sb-game.sb-is-expanded.sb-has-win .sb-card.is-fullscreen { padding-bottom: 108px; }
@keyframes sb-pulse {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(60,97,198,.5); }
	50% { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(60,97,198,0); }
}

/* --- isolation guards: win over a stray theme / Elementor Kit stylesheet --- */
.sb-app button, .sb-app input {
	-webkit-appearance: none !important;
	appearance: none !important;
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
	white-space: normal !important;
	min-height: 0 !important;
	width: auto;
	margin: 0;
}
.sb-app .sb-square, .sb-app .sb-square-text {
	white-space: normal !important;
	overflow-wrap: anywhere;
	word-break: break-word;
	max-width: 100%;
}
.sb-app .sb-square {
	background: #fff !important;
	border: 1px solid var(--sb-square-border) !important;
	color: var(--sb-ink) !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	font-family: var(--sb-body) !important;
	font-weight: 400 !important;
	font-size: clamp(.55rem, 1.7vw, .82rem) !important;
	line-height: 1.18 !important;
}
.sb-app button.sb-square:not(.is-checked):not(.is-free):hover { background: #fff !important; border-color: var(--sb-blue) !important; }
.sb-app .sb-square.is-checked { background: var(--sb-blue) !important; border-color: var(--sb-blue) !important; color: #fff !important; font-weight: 500 !important; }
.sb-app .sb-square.is-free { background: var(--sb-gold) !important; border-color: var(--sb-gray) !important; color: var(--sb-gold-ink) !important; font-weight: 500 !important; cursor: default !important; }
.sb-app .sb-btn { background: var(--sb-blue) !important; color: #fff !important; border: 0 !important; border-radius: 9px !important; font-weight: 700 !important; cursor: pointer !important; }
.sb-app .sb-btn:hover { background: var(--sb-blue-dark) !important; }
.sb-app .sb-form input {
	background: #fff !important;
	border: 1px solid var(--sb-square-border) !important;
	border-radius: 9px !important;
	color: var(--sb-ink) !important;
}
.sb-app .sb-form input:focus { border-color: var(--sb-blue) !important; box-shadow: 0 0 0 3px rgba(60,97,198,.2) !important; }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 760px) {
	.sb-section { padding: 48px 0; }
	.sb-steps { grid-template-columns: 1fr; }
	.sb-bullets { grid-template-columns: 1fr; }
	.sb-cards { grid-template-columns: 1fr; }
	.sb-cardw { flex-direction: column; }
	.sb-cardw-photo { min-height: 200px; }
	.sb-links { grid-template-columns: 1fr; }
	.sb-hero { min-height: 460px; }
}
@media (max-width: 480px) {
	.sb-container { padding: 0 16px; }
	.sb-card { padding: 12px; border-radius: 16px; }
	.sb-board { gap: 5px; }
	.sb-bingo-header { gap: 5px; }
	.sb-square { padding: 4px; }
	.sb-signin-overlay { padding: 10px; }
	.sb-signin-panel { padding: 20px; border-radius: 14px; }
	.sb-signin { padding: 22px; }
}