:root {
--background:#FFF8E1;
--cream:#FFF8E1;
--sun:#FFE44D;
--gold:#FFD700;
--leaf:#4CAF50;
--leaf-dark:#2D8B4E;
--leaf-deep:#1F6B40;
--sky:#87CEEB;
--sky-dark:#2196F3;
--navy:#145A9E;
--wood:#8B4513;
--wood-light:#DDC080;
--wood-dark:#3E2A14;
--berry:#FF6B6B;
--berry-dark:#CC3333;
--ink:#333333;
--ink-soft:#5C5347;
--paper:#FFFFFF;
--radius:18px;
--awn-shadow:0 5px 5px -4px rgba(122,86,28,.28);
}
*, ::after, ::before {
	box-sizing: border-box
}
body, html {
	max-width: 100%;
	overflow-x: hidden
}
body {
	margin: 0;
	background: var(--background);
	color: var(--ink);
	font-family: Nunito, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3 {
	line-height: 1.2
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: #fff;
padding:.75rem 1.25rem;
	border-radius: 0 0 10px;
	font-weight: 700;
	z-index: 1000
}
.skip-link:focus {
	left: 0
}
a:focus-visible, button:focus-visible {
outline:3px solid var(--navy);
outline-offset:2px;
border-radius:3px
}
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0
}
header.site-header {
	height: auto;
	min-height: 120px
}
.site-header .header-inner {
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	padding: 0
}
.site-logo-link {
	display: flex;
	align-items: center;
	max-width: 350px
}
.site-logo {
	width: auto;
	max-width: 350px;
	max-height: 85px;
	display: block
}
.site-title {
	font-family: "Baloo 2", sans-serif;
	font-weight: 800;
	font-size: 30px;
	margin: 0;
	text-align: right;
	line-height: 1.15
}
.awning {
	height: 30px;
	margin: 0;
	background: repeating-linear-gradient(90deg, var(--cream) 0 26px, var(--berry) 26px 52px);
	border-bottom: 2px solid var(--cream);
	border-top: 2px solid var(--cream);
	box-shadow: var(--awn-shadow);
}
.games-section {
	padding: 3rem 0
}
.games-title {
	font-size: 48px;
	font-weight: 700
}
.games-subtitle {
	font-family: Nunito, sans-serif;
	font-size: 18px
}
/* Small preview of every game's world, so the first screen has a moment of its own
   before the card grid — reuses the same art already used on each game's own card. */
.hero-strip {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px
}
.hero-strip img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 14px;
	border: 3px solid var(--wood);
	box-shadow: 0 3px 0 rgba(51,51,51,.15);
	animation: heroFloat 3.6s ease-in-out infinite
}
.hero-strip img:nth-child(2n) {
	animation-delay: -1.2s
}
.hero-strip img:nth-child(3n) {
	animation-delay: -2.4s
}
@keyframes heroFloat {
	0%, 100% { transform: translateY(0) }
	50% { transform: translateY(-5px) }
}
@media (prefers-reduced-motion: reduce) {
	.hero-strip img {
		animation: none
	}
}
.row-cards > * {
	opacity: 0;
	animation: cardRise .5s ease both
}
.row-cards > *:nth-child(1) { animation-delay: .08s }
.row-cards > *:nth-child(2) { animation-delay: .14s }
.row-cards > *:nth-child(3) { animation-delay: .2s }
.row-cards > *:nth-child(4) { animation-delay: .26s }
.row-cards > *:nth-child(5) { animation-delay: .32s }
.row-cards > *:nth-child(6) { animation-delay: .38s }
.row-cards > *:nth-child(7) { animation-delay: .44s }
@keyframes cardRise {
	from { opacity: 0; transform: translateY(14px) }
	to { opacity: 1; transform: none }
}
@media (prefers-reduced-motion: reduce) {
	.row-cards > * {
		animation: none;
		opacity: 1
	}
}
.row-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	margin: 0
}
.row-cards::after, .row-cards::before {
	content: none
}
@media (min-width:600px) {
.row-cards {
	grid-template-columns: repeat(2, 1fr)
}
}
@media (min-width:992px) {
.row-cards {
	grid-template-columns: repeat(3, 1fr)
}
}
.row-cards>[class*=col-] {
display:flex;
width:auto;
max-width:none;
min-width:0;
padding:0;
margin:0;
float:none
}
.game-card {
	width: 100%;
	display: flex;
	flex-direction: column;
	text-align: center;
	border: 3px solid var(--wood);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 4px 0 rgba(62,42,20,.1)
}
.game-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4/3;
	object-fit: cover;
	background: var(--sun)
}
.game-card__body {
	padding: 1.1rem 1.25rem 1.5rem
}
.game-card__title {
	font-size: 28px;
margin:.25rem 0 0
}
.game-card__desc {
	font-family: Nunito, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-soft);
	margin: 0
}
.game-card:hover {
	box-shadow: 0 6px 18px rgba(39,39,99,.2)
}
.game-card a {
	text-decoration: none
}
.row-cards>.col-featured {
	grid-column: 1/-1
}
.game-card--featured {
	border-color: var(--gold);
	border-width: 4px
}
.game-card--featured .game-card__featured-label {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	font-family: "Baloo 2", sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--wood-dark);
	background: var(--sun);
	padding: 3px 10px;
	border-radius: 20px;
	margin: 0 0 8px
}
@media (min-width:600px) {
.game-card--featured>a {
	display: flex;
	flex-direction: row
}
.game-card--featured .game-card__img {
	width: 45%;
	aspect-ratio: auto;
	height: auto
}
.game-card--featured .game-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left
}
}
.btn {
	border-radius: 50px;
	padding: 15px 30px;
	font-size:17px;
}
.btn.focus, .btn:focus, .btn:hover {
	color: #fff;
	text-decoration: none;
}
button, [role="button"], .btn, .st-btn, .chip-btn, .src-btn, .cat-item, .mode-card, .goal-card, .level-card {
touch-action:manipulation
}
.site-footer {
	background: var(--wood-dark);
	color: var(--cream);
	padding: 2.5rem 0;
	font-size: 18px;
	margin-top: 40px
}
.site-footer a {
	color: var(--sun);
	text-decoration: underline
}
.site-footer a:focus, .site-footer a:hover {
	color: inherit
}
.footer-heading {
	font-size: 20px;
	color: var(--cream);
margin:0 0 .75rem
}
.footer-links {
	list-style: none;
	padding: 0;
	margin: 0
}
.footer-links li {
margin:.45rem 0
}
.footer-text {
	text-align: left;
	margin: 0
}
.footer-nav {
	text-align: right
}
@media (max-width:767px) {
.footer-nav, .site-title {
	text-align: left
}
.footer-nav {
	margin-top: 1.5rem
}
.site-header .header-inner {
	justify-content: center
}
}
@media (prefers-reduced-motion:reduce) {
* {
	animation: none!important;
	transition: none!important
}
}
body.focus-mode .awning, body.focus-mode .site-footer, body.focus-mode .site-header {
	display: none!important
}
body.focus-mode .games-section {
	min-height: 100vh;
	min-height: 100svh;
	padding-top: 1.5rem
}
#kioskFab, #kioskHelp {
	box-shadow: 0 3px 0 rgba(62,42,20,.18);
	cursor: pointer
}
#kioskDialog, #kioskHelp, .games-title, .site-title {
	color: var(--ink)
}
#kioskFab, h1, h2, h3 {
	font-family: "Baloo 2", Nunito, sans-serif
}
#kioskDialog, #kioskFab, #kioskHelp, .game-card, .site-header {
	background: var(--paper)
}
#kioskFab, .game-card__title, .games-subtitle {
	font-weight: 700;
	color: var(--ink)
}
#kioskDialog .kd-body h4, #kioskDialog .kd-head, .footer-heading {
	font-family: "Baloo 2", sans-serif
}
#kioskControls {
	position: fixed;
	right: 14px;
	bottom: 14px;
	z-index: 1200;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px
}
#kioskFab {
	position: relative;
	display: inline-flex;
	align-items: center;
gap:.5rem;
	padding: 11px 18px;
	border: 2px solid var(--wood);
	font-size: 15px;
	line-height: 1;
	border-radius: 50px;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: none
}
#kioskFab::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: rgba(31,107,64,.25);
	pointer-events: none
}
#kioskFab.holding::after {
	width: 100%;
	transition: width 1.2s linear
}
#kioskHelp {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid var(--wood);
	font-size: 16px
}
@media (max-width: 480px) {
	/* On phone-width screens a fixed, always-floating control inevitably lands on top of
	   *some* page content, since pages vary in height. Parents set kiosk/full-screen mode
	   once before handing the device over (per the help dialog's own copy — Add to Home
	   Screen, Guided Access, Screen pinning), not mid-gameplay, so pinning this to the end
	   of the page instead of floating over it trades away mid-scroll reachability for
	   never covering game content — the better trade on a small screen. */
	#kioskControls {
		position: static;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin: 20px 0 0;
	}
	#kioskFab {
		width: 38px;
		height: 38px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}
	#kioskFab .kf-label {
		display: none;
	}
}
#kioskDialog {
	padding: 0;
	width: calc(100% - 32px);
	max-width: 460px;
	border: 3px solid var(--wood);
	border-radius: var(--radius)
}
#kioskDialog:not([open]) {
	display: none
}
#kioskDialog::backdrop {
background:rgba(62,42,20,.45)
}
#kioskDialog .kd-head {
	margin: 0;
	background: var(--leaf-deep);
	color: #fff;
	padding: 14px 18px;
	font-weight: 800;
	font-size: 19px
}
#kioskDialog .kd-body {
	padding: 14px 18px;
	font-size: 15px;
	line-height: 1.5
}
#kioskDialog .kd-body h4 {
margin:.85rem 0 .2rem;
	font-size: 16px
}
#kioskDialog .kd-body p {
margin:.2rem 0
}
#kioskDialog .kd-body [data-current] {
	background: var(--cream);
	border-left: 4px solid var(--leaf-deep);
	padding: 8px 10px;
	border-radius: 8px;
margin-top:.85rem
}
#kioskDialog .kd-foot {
	padding: 4px 18px 18px;
	text-align: right
}
#kioskDialog .kd-close {
	background: var(--leaf-deep);
	color: #fff;
	border: none;
	border-radius: 50px;
	padding: 10px 22px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer
}
main,
.site-main {
  flex: 1 0 auto;
}

.site-footer {
  flex-shrink: 0;
  margin-top: 50px;
}

.fade-in-after-delay {
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
  animation-delay: 0.1s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
  .game-card--featured > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

@media (min-width: 600px) {
  .game-card--featured > a {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 300px;
  }

  .game-card--featured .game-card__img {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    height: 300px;
    object-fit: cover;
    object-position: center;
    aspect-ratio: auto;
  }

  .game-card--featured .game-card__body {
    flex: 1 1 55%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(50px, 8vw, 90px) 20px 20px;
  }
}


.game-card {

    border: 3px solid var(--berry);

}