/* ===========================================================================
   DESIGN TOKENS - family palette; AA-safe text tokens from the cashier audit
   ================================= ========================================== */
:root {

 --radius:18px;
--app-max:520px;
 --display:'Baloo 2', 'Arial Black', Arial, sans-serif;
 --body:'Nunito', Arial, 'Helvetica Neue', sans-serif;
 --awn-stripe:#FFE069;   /* soft awning yellow */
 --awn-gap:#FFFFFF;      /* white stripe */
 --awn-rail:#FBCB45;     /* solid bottom rail (deeper yellow) */
 --awn-edge:#E4B25A;     /* thin top edge line */
 --awn-band:30px;        /* visible main-band height */
 --awn-sw:26px;          /* one stripe width (period = 2x) */
 --awn-shadow:0 5px 5px -4px rgba(122,86,28,.28);
}
* {
	box-sizing: border-box
}
/* Reserve the vertical scrollbar gutter so the centered layout never shifts
   sideways when page height crosses the viewport. In Learner mode the play
   screen sits right at the viewport height and the feedback message grows from
   one line on Plant to two lines on Grow, toggling the scrollbar each action;
   without a stable gutter, a space-taking scrollbar re-centers #app and the
   whole screen jumps. (overflow-y:scroll is the fallback for pre-2022 browsers.) */
html {
	scrollbar-gutter: stable;
	overflow-y: scroll
}
body {
	margin: 0;
	font-family: var(--body);
	color: var(--ink);
	background: var(--cream);
	line-height: 1.4;
	background-image: radial-gradient(125% 90% at 50% -8%, #FFFEF6 0%, #FFFAEA 40%, var(--cream) 74%);
	background-attachment: fixed
}
button {
	font-family: inherit;
	cursor: pointer
}
button:focus-visible, input:focus-visible {
outline:3px solid var(--navy);
outline-offset:2px
}
/* Explicit Baloo display weights (Baloo 2 has no 900 like Arial Black) */
h1 {
	font-weight: 600
}
h2, h3 {
	font-weight: 700
}
.btn {
	font-weight: 700
}
strong {
	font-weight: 800
}
.awning {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 -12px 12px;
	padding: 14px 10px 18px;
	background: repeating-linear-gradient(90deg, var(--sun) 0 34px, var(--paper) 34px 68px);
	border-bottom: 6px solid var(--gold);
	border-radius: 0 0 22px 22px;
	box-shadow: 0 4px 0 rgba(51,51,51,.10);
}
.awning h1 {
	font-family: var(--display);
	font-size: clamp(20px, 5.6vw, 28px);
	margin: 0;
	color: var(--ink);
	background: var(--paper);
	border: 4px solid var(--wood);
	border-radius: 14px;
	padding: 6px 16px;
	box-shadow: 0 4px 0 var(--wood);
	letter-spacing: .5px;
}
.awning h1 .ic {
	width: 1.05em;
	height: 1.05em;
	vertical-align: -0.12em;
	color: var(--wood)
}
/* == /family-chrome:header == */
/* ---- per-game utility (not managed by family-chrome) ---- */
:focus-visible {
outline:3px solid var(--navy);
outline-offset:2px
}
/* ===== Awning header: full-width striped band with a centered title "tongue"
   that hangs DOWN below the band to cradle the game-title pill. The band is
   painted by ::before; the tongue (.gtb-tab) overlaps up into the band and,
   because both share the same fixed-attachment stripe gradient, the stripes
   flow seamlessly from band into tongue (it reads as one carved awning). ===== */

.awn-stripes {
 background:repeating-linear-gradient(90deg,  var(--awn-stripe) 0 var(--awn-sw),  var(--awn-gap) var(--awn-sw) calc(var(--awn-sw)*2));
	background-attachment: fixed;
}
#game-title-bar {
	position: relative;
	margin: 0 0 16px;
	background: none;
}
/* the main awning band -- full width, fixed height, in normal flow so the
   tongue that follows reserves its own space below */
#game-title-bar::before {
	content: "";
	display: block;
	height: var(--awn-band);
 background:repeating-linear-gradient(90deg,  var(--awn-stripe) 0 var(--awn-sw),  var(--awn-gap) var(--awn-sw) calc(var(--awn-sw)*2));
	background-attachment: fixed;
	border-top: 2px solid var(--awn-edge);
	border-bottom: 3px solid var(--awn-rail);
	box-shadow: var(--awn-shadow);
}
/* the centered tongue -- hugs the pill, hangs below the band, rounded bottom */

.gtb-tab {
 --awn-overlap: 26px;
 --awn-fillet: 12px;
	position: relative;
	z-index: 1;
	width: 35vw;
	min-width: fit-content;
	max-width: 92vw;
 margin: calc(var(--awn-overlap) * -1) auto 0;
	padding: 11px 18px 14px;
 background: repeating-linear-gradient(90deg, var(--awn-stripe) 0 var(--awn-sw), var(--awn-gap) var(--awn-sw) calc(var(--awn-sw)*2));
	background-attachment: fixed;
	border: none;
	border-bottom: 3px solid var(--awn-rail);
	border-radius: 0 0 22px 22px;
	box-shadow: var(--awn-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* concave fillets: quarter-rounds of rail color that smooth the corner where the
   band's bottom edge sweeps down into the tongue's sides (reads as one piece) */
.gtb-tab::before, .gtb-tab::after {
	content: "";
	position: absolute;
	top: var(--awn-overlap);
	width: var(--awn-fillet);
	height: var(--awn-fillet);
}
.gtb-tab::before {
 left:calc(var(--awn-fillet) * -1);
	background: radial-gradient(circle at bottom left,  transparent var(--awn-fillet), var(--awn-rail) calc(var(--awn-fillet) + 0.5px));
}
.gtb-tab::after {
 right:calc(var(--awn-fillet) * -1);
	background: radial-gradient(circle at bottom right,  transparent var(--awn-fillet), var(--awn-rail) calc(var(--awn-fillet) + 0.5px));
}
/* the game-title pill -- straddles the band/tongue seam */
#game-title-bar h1 {
	position: relative;
	font-family: var(--display);
	font-size: clamp(20px, 5.6vw, 28px);
	margin: 0;
	color: var(--ink);
	background: var(--paper);
	border: 4px solid var(--wood);
	border-radius: 16px;
	padding: 6px 18px;
	box-shadow: 0 3px 0 rgba(110,72,30,.22);
	letter-spacing: .5px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
#game-title-bar h1 .ic {
	width: 1.05em;
	height: 1.05em;
	color: var(--wood)
}
.actions {
	display: flex;
	gap: 10px
}
.actions .btn {
	flex: 1
}
/*.card{background:var(--paper);border-radius:var(--radius);padding:24px;text-align:center;
  font-family:var(--display);font-size:24px;min-height:96px;display:flex;align-items:center;justify-content:center}*/
.feedback {
	min-height: 24px;
	font-weight: bold;
	color: var(--ink)
}
.feedback.good {
	color: var(--leaf-deep)
}
.badge-shelf h3 {
	font-family: var(--display);
	font-size: 19px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink);
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px
}
/* == family-chrome:core (managed) == */
/* ---- Breakpoint scaffold: only --app-max is global; palette stays per-game -- */
:root {
--app-max:520px;
}
/* ---- UI icon set (currentColor SVG, replaces emoji) -------------------- */
.ic {
	width: 1.15em;
	height: 1.15em;
	display: inline-block;
	vertical-align: -0.2em;
	flex: none;
	color: inherit;
	fill: currentColor
}
.ic-star {
	color: var(--gold)
}
.icon-btn .ic {
	width: 22px;
	height: 22px;
	color: var(--ink)
}
.btn .ic {
	width: 1.05em;
	height: 1.05em;
	vertical-align: -0.14em
}
.badge-shelf h3 .ic {
	color: var(--gold)
}
.mode-card .mc-emoji-wrap .ic {
	width: 30px;
	height: 30px
}
.mode-learner .mc-emoji-wrap .ic {
	color: var(--leaf-deep)
}
.mode-standard .mc-emoji-wrap .ic {
	color: var(--gold)
}
.mode-entrepreneur .mc-emoji-wrap .ic {
	color: var(--berry-dark)
}
.chip-stars .ic {
	color: var(--gold)
}
.chip-streak .ic {
	color: var(--berry-dark)
}
.star-line .ic {
	width: 26px;
	height: 26px;
	color: var(--gold)
}
.b-icon .ic {
	width: 26px;
	height: 26px
}
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap
}
/* ---- Layout primitives -------------------------------------------------- */
/* width:100% is load-bearing: the site chrome (home.css) makes <body> a flex
   column, and a flex item with auto side-margins (margin:0 auto) does NOT
   stretch - it shrinks to its content's width. Without an explicit width, #app
   then tracks the garden content's intrinsic width, which changes between
   actions (e.g. 1-line vs 2-line feedback), so the whole centered screen jumps
   sideways on every Plant/Grow. width:100% pins it to --app-max instead. */


#app {max-width:var(--app-max);width:100%;margin:0 auto;padding:10px 12px 24px;position:relative;z-index:1}

/* ---- Scenes ------------------------------------------------------------ */
.scene {
	display: none;
	flex-direction: column;
	gap: 15px
}
.scene.active {
	display: flex
}
/* ---- Chunky game buttons ------------------------------------------------ */
.btn {
transition: transform .06s ease, box-shadow .06s ease;
}
.btn:active {
	transform: translateY(4px);
	box-shadow: 0 1px 0 #143d26
}
.btn[disabled] {
	opacity: .45;
	cursor: default;
	transform: none
}
.btn-sky {
	background: var(--navy);
	box-shadow: 0 5px 0 #0d3b66
}
.btn-sky:active {
	box-shadow: 0 1px 0 #0d3b66
}
.btn-berry {
	background: var(--berry-dark);
	box-shadow: 0 5px 0 #8E2323
}
.btn-berry:active {
	box-shadow: 0 1px 0 #8E2323
}
.btn-ghost {
	background: var(--paper);
	color: var(--ink);
	box-shadow: 0 5px 0 #d7cfae;
	border: 2px solid #e8dfbd;
	font-size: 17px;
}
.btn-ghost:active {
	box-shadow: 0 1px 0 #d7cfae
}
.btn-small {
	font-size: 14px;
	padding: 9px 14px;
	min-height: 44px
}
/* ---- Icon buttons ------------------------------------------------------- */
.icon-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: var(--paper);
	box-shadow: 0 3px 0 rgba(51,51,51,.15);
	font-size: 19px;
	line-height: 1;
}
.icon-btn:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 rgba(51,51,51,.15)
}
/* ---- HUD chips ---------------------------------------------------------- */
.hud .chip {
	font-family: var(--display);
	font-size: 15px;
	background: var(--paper);
	border-radius: 999px;
	padding: 7px 12px;
	box-shadow: 0 3px 0 rgba(51,51,51,.12);
}
.chip-stars {
	color: #806000
}
.chip-streak {
	color: var(--berry-dark)
}
/* ---- Menu scene --------------------------------------------------------- */

.mode-card {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	text-align: left;
	background: var(--paper);
	border: 4px solid transparent;
	border-radius: var(--radius);
	padding: 14px;
	box-shadow: 0 5px 0 rgba(51,51,51,.12);
	transition: transform .06s ease;
}
.mode-card:active {
	transform: translateY(3px)
}
.mode-card .mc-emoji-wrap {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
}
.mode-card h2 {
	font-family: var(--display);
	font-size: 19px;
	margin: 0
}
.mode-card p {
	margin: 0;
	font-size: 14px;
	color: var(--ink-soft)
}
.mode-card .mc-best {
	font-size: 12px;
	color: var(--leaf-deep);
	font-weight: bold;
	margin-top: 3px
}
.mc-age {
	display: block;
	font-family: var(--display);
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 6px;
	line-height: 1.1
}
.mode-learner {
	border-color: var(--sun)
}
.mode-learner .mc-emoji-wrap {
	background: var(--sun)
}
.mode-standard {
	border-color: var(--sky)
}
.mode-standard .mc-emoji-wrap {
	background: var(--sky)
}
.mode-entrepreneur {
	border-color: var(--leaf)
}
.mode-entrepreneur .mc-emoji-wrap {
	background: #C8E6C9
}
.rush-row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #FFF3CD;
	border: 2px dashed var(--gold);
	border-radius: 14px;
	padding: 10px 14px;
	font-size: 15px;
}
.rush-row input {
	width: 22px;
	height: 22px;
	accent-color: var(--leaf-dark)
}
.badge-shelf {
	background: var(--paper);
	border-radius: var(--radius);
	padding: 12px 14px;
	box-shadow: 0 5px 0 rgba(51,51,51,.12)
}
.badge-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center
}
.badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 72px;
	font-size: 13px;
	text-align: center;
	color: var(--ink-soft);
	background: none;
	border-radius: 0;
	padding: 0;
	min-width: 0;
	white-space: normal;
	font-weight: normal;
	line-height: inherit;
}
.badge .b-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	background: #EEEEEE;
	filter: grayscale(1);
	opacity: .55;
	border: 3px solid #ddd;
}
.badge.earned .b-icon {
	background: var(--sun);
	filter: none;
	opacity: 1;
	border-color: var(--gold)
}
.badge.earned {
	color: var(--ink);
	font-weight: bold
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *:before, *:after {
	animation-duration: .01ms !important;
	transition-duration: .01ms !important
}
}

/* Tier 1 desktop: fill more width.
   (min-width is in CSS px, so dpr/"retina" scaling is already accounted for.) */
@media (min-width:760px) {
:root {
--app-max:740px;
}
}
/* Tier 2 desktop (>=960px): menu grid. Pure CSS via grid-template-areas -
   DOM order is unchanged, so keyboard focus and screen-reader order are exactly
   as before. Menu/summary stay a tidy centered column. */
@media (min-width:960px) {
:root {
--app-max:900px;
}
#scene-menu, #scene-summary {
	margin-left: auto;
	margin-right: auto;
}
#scene-menu.active {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas: "blurb blurb blurb" "lrn std ent" "rush rush rush" "badges badges badges";
}
#scene-menu .menu-blurb {
	grid-area: blurb;
}
#scene-menu .mode-learner {
	grid-area: lrn;
}
#scene-menu .mode-standard {
	grid-area: std;
}
#scene-menu .mode-entrepreneur {
	grid-area: ent;
}
#scene-menu .rush-row {
	grid-area: rush;
}
#scene-menu .badge-shelf {
	grid-area: badges;
}
#scene-menu .mode-card {
	flex-direction: column;
	text-align: center;
	align-items: center;
}
}
/* == /family-chrome:core == */

.link-btn {
	background: none;
	border: 0;
	color: var(--navy);
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	padding: 10px 14px;
	min-height: 44px;
	border-radius: 10px;
}
/* For Grown-Ups now sits below the badges, centered (the mute moved to the play HUD).
   Garden has no rush-row, so the Tier-2 menu grid is re-stated here without it and
   with a full-width "parents" row below the badges (managed core block untouched). */
.parents-row {
	text-align: center
}
@media (min-width:960px) {
#scene-menu.active {
	grid-template-areas: "blurb blurb blurb" "lrn std ent" "badges badges badges" "parents parents parents";
}
#scene-menu .parents-row {
	grid-area: parents;
}
}
/* ---- Cards / menu ----------------------------------------------------------- */
.card {
	background: var(--paper);
	border-radius: var(--radius);
	padding: 16px;
	box-shadow: 0 5px 0 rgba(51,51,51,.12)
}
.card h2 {
	font-family: var(--display);
	font-size: 17px;
	margin: 0 0 8px
}
.card h3 {
	font-family: var(--display);
	font-size: 17px;
	margin: 0 0 8px;
	color: var(--ink);
	letter-spacing: 1px;
	text-transform: uppercase
}
.notice {
	background: #FFF3CD;
	border: 2px dashed var(--gold);
	border-radius: 14px;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.45;
}
/* ---- Garden HUD ---------------------------------------------------------------- */
.hud {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap
}
.hud .spacer {
	flex: 1
}
.chip-season {
	color: var(--navy)
}
/* ---- Garden stage ----------------------------------------------------------------- */
.garden-card {
	padding: 10px 10px 14px
}
.garden-stage svg {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 14px
}
.stat-row {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 15px
}
.stat {
	text-align: center;
	/*background: var(--cream);*/
	border-radius: 14px;
	padding: 8px 12px;
	min-width: 92px;
}
.stat .st-num {
	font-family: var(--display);
	font-size: 18px;
	color: var(--leaf-deep)
}
.stat.gold .st-num {
	color: #806000
}
.stat .st-lab {
	font-size: 13px;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 1px
}
.total-line {
	text-align: center;
	font-family: var(--display);
	font-size: 18px;
	margin: 8px 0 0;
}
.total-line .t-amt {
	font-size: 21px;
	color: var(--leaf-deep)
}
/* ---- Plant controls --------------------------------------------------------------- */
.plant-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center
}
.chip-btn {
	font-family: var(--display);
	font-size: 16px;
	border: 3px solid #eee;
	border-radius: 999px;
	background: #FCFBF4;
	color: var(--leaf-deep);
	padding: 10px 16px;
	min-height: 46px;
}
.chip-btn:active {
	transform: translateY(2px)
}
.chip-btn[disabled] {
	opacity: .4;
	cursor: default;
	transform: none
}
.actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap
}
.actions .btn {
	flex: 1;
	min-width: 150px
}
/* ---- Feedback (inline, never a modal) ------------------------------------------------ */
.feedback {
	border-radius: 16px;
	padding: 14px 16px;
	font-size: 16px;
	line-height: 1.5;
	display: none;
	align-items: flex-start;
	gap: 10px;
}
.feedback.show {
	display: flex;
	animation: pop .25s ease
}
@keyframes pop {
0% {
transform:scale(.94);
opacity:0
}
100% {
transform:scale(1);
opacity:1
}
}
.feedback .f-emoji {
	font-size: 24px;
	line-height: 1
}
.feedback.good {
	background: #C8E6C9;
	color: var(--leaf-deep)
}
.feedback.gold {
	background: #FFF3CD;
	color: #6F5700
}
.feedback.think {
	background: #E8F1FA;
	color: var(--navy)
}
/* ---- Season log / chart --------------------------------------------------------------- */
.season-log {
	list-style: none;
	margin: 0;
	padding: 0
}
.season-log li {
	display: flex;
	gap: 8px;
	font-size: 16px;
	padding: 6px 0;
	border-bottom: 1px dashed #e8dfbd
}
.season-log li:last-child {
	border-bottom: 0
}
.season-log .l-season {
	font-family: var(--display);
	font-size: 16px;
	color: var(--ink);
	flex: 0 0 70px
}
.season-log .l-grow {
	margin-left: auto;
	font-family: var(--display);
	font-size: 18px;
	color: #806000;
	white-space: nowrap
}
.chart-wrap svg {
	width: 100%;
	height: auto;
	display: block
}
#chartHost text {
	font-family: var(--body)
}
.chart-legend {
	display: flex;
	gap: 12px;
	font-size: 16px;
	color: var(--ink-soft);
	justify-content: center;
	margin-top: 4px;
	flex-wrap: wrap
}
.chart-legend .cl {
	display: flex;
	align-items: center;
	gap: 5px
}
.cl .swatch {
	width: 18px;
	height: 4px;
	border-radius: 2px;
	display: inline-block
}
/* ---- Summary ----------------------------------------------------------------------------- */
.sum-title {
	font-family: var(--display);
	font-size: 22px;
	text-align: center;
	margin: 0
}
.sum-sub {
	text-align: center;
	color: var(--ink-soft);
	font-size: 16px;
	margin: 4px 0 0
}
.breakdown {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 12px
}
.bk-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px
}
.bk-row .bk-lab {
	flex: 0 0 150px;
	font-weight: bold
}
.bk-bar {
	flex: 1;
	height: 18px;
	border-radius: 999px;
	background: #EEE7CB;
	overflow: hidden
}
.bk-fill {
	display: block;
	height: 100%;
	border-radius: 999px
}
.bk-fill.green {
	background: linear-gradient(90deg, var(--leaf-dark), var(--leaf-deep))
}
.bk-fill.goldf {
	background: linear-gradient(90deg, #A87A00, #8A5A00);
	box-shadow: inset 0 2px 0 #FFD700
}
.bk-row .bk-amt {
	flex: 0 0 64px;
	text-align: right;
	font-family: var(--display);
	font-size: 16px
}
.bk-row.green .bk-amt {
	color: var(--leaf-deep)
}
.bk-row.goldr .bk-amt {
	color: #806000
}
.insight {
	background: #FFF3CD;
	border: 3px dashed var(--gold);
	border-radius: 16px;
	padding: 12px 14px;
	text-align: center;
	font-size: 15.5px;
	line-height: 1.5;
	font-weight: bold;
	color: #6F5700;
	margin-top: 12px;
}
.dinner {
	background: #E8F1FA;
	border: 3px dashed var(--navy);
	border-radius: 16px;
	padding: 12px 14px
}
.dinner h3 {
	color: var(--navy);
	margin: 0 0 4px
}
.dinner p {
	margin: 0;
	font-size: 15px;
	line-height: 1.45
}
.new-badge {
	font-size: 14px;
	color: var(--berry-dark);
	font-weight: bold;
	text-align: center;
	margin: 10px 0 0
}
/* ---- Sheets (Escape + focus trap, shared helper) -------------------------------------------
   Centered modal (the family standard) - NOT a bottom sheet: a bottom-anchored position:fixed
   overlay drifts off-screen inside an iframe, so center it and let tall content scroll. */
.sheet-veil {
	position: fixed;
	inset: 0;
	background: rgba(51,51,51,.55);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 80;
	padding: 16px;
}
.sheet-veil.open {
	display: flex
}
.sheet {
	background: var(--paper);
	border-radius: 22px;
	width: 100%;
	max-height: 86vh;
	overflow: auto;
	padding: 18px 16px 24px;
	box-shadow: 0 8px 0 rgba(0,0,0,.18);
	width: 50%;
}
.sheet h2 {
	font-family: var(--display);
	font-size: 18px;
	margin: 0 0 10px;
	text-align: center
}
.chip-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 8px 0
}
.sheet .chip-btn[aria-pressed="true"] {
	border-color: var(--leaf-deep);
	background: #EAF4EC
}
.sheet .warn-line {
	background: #FFF3CD;
	border: 2px dashed var(--gold);
	border-radius: 12px;
	padding: 9px 12px;
	font-size: 14px;
	text-align: center;
	color: #6F5700;
	font-weight: bold;
	margin: 8px 0;
}
.sheet p {
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 10px
}
#confetti {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 90
}
@keyframes sprout {
0% {
transform:scale(0)
}
70% {
transform:scale(1.15)
}
100% {
transform:scale(1)
}
}
.plant-new {
	animation: sprout .45s ease;
	transform-origin: bottom center;
	transform-box: fill-box
}
/* Ambient at-rest motion: a garden should feel alive between actions, not just when tapped. */
@keyframes plantSway {
0%, 100% { transform: rotate(-1.5deg) }
50% { transform: rotate(1.5deg) }
}
@keyframes coinTwinkle {
0%, 100% { filter: brightness(1) }
50% { filter: brightness(1.3) }
}
#gardenStage svg use[href^="#p"] {
	transform-box: fill-box;
	transform-origin: bottom center;
	animation: plantSway 4.5s ease-in-out infinite
}
#gardenStage svg use[href^="#p"]:nth-of-type(3n+1) {
	animation-delay: -1.5s
}
#gardenStage svg use[href^="#p"]:nth-of-type(3n+2) {
	animation-delay: -3s
}
#gardenStage svg use[href^="#g"] {
	animation: coinTwinkle 2.6s ease-in-out infinite
}
#gardenStage svg use[href^="#g"]:nth-of-type(2n) {
	animation-delay: -1.3s
}
/* ---- Desktop Tier 2 (>=960px): 2-D layout via grid-template-areas.
   CSS-only - DOM order unchanged. The garden sits on the left across three rows;
   plant chips + Grow + feedback stack on the right; log/chart are full-width. */
@media (min-width:960px) {
#scene-menu, #scene-summary {
	margin-left: auto;
	margin-right: auto;
}
#scene-garden.active {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "hud      hud"  "notice   notice"  "garden   plant"  "garden   actions"  "garden   feedback"  "log      log"  "chart    chart";
	align-items: start;
	gap: 14px;
}
#scene-garden > .hud {
	grid-area: hud;
}
#scene-garden > #firstPlantHint {
	grid-area: notice;
}
#scene-garden > .garden-card {
	grid-area: garden;
	align-self: start;
}
#scene-garden > .card:not(.garden-card):not([id]) {
	grid-area: plant;
}
#scene-garden > .actions {
	grid-area: actions;
}
#scene-garden > .feedback {
	grid-area: feedback;
}
#scene-garden > #logCard {
	grid-area: log;
}
#scene-garden > #chartCard {
	grid-area: chart;
}
}
/* ===== Full-screen toggle (self-contained; mirrors cashier's feature) ========
   A floating button (built by the script before </body>) toggles native
   fullscreen with a CSS-maximize fallback. In fullscreen the scenes stay
   centered and capped via --fs-max so gameplay does not stretch into dead space;
   anything outside .scene (e.g. the awning) bleeds the full width. */
.fs-btn {
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 50;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--paper, #fff);
	color: var(--ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(51,51,51,.28);
}
.fs-btn:active {
	box-shadow: 0 2px 8px rgba(51,51,51,.28);
	transform: translateY(1px);
}
.fs-btn .ic {
	width: 22px;
	height: 22px;
	display: block;
}
@media (max-width:759px) {
#app {
	padding-bottom: 72px;
}
}
body.maximized {
	overflow: hidden;
}
body.maximized #app {
	position: fixed;
	inset: 0;
	max-width: none;
	margin: 0;
	z-index: 9999;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--cream);
}
#app:fullscreen {
max-width:none;
width:100vw;
min-height:100vh;
min-height:100dvh;
margin:0;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
background:var(--cream);
}
#app:-webkit-full-screen {
max-width:none;
width:100vw;
min-height:100vh;
margin:0;
overflow-y:auto;
overflow-x:hidden;
background:var(--cream);
}
:root {
--fs-max:1100px;
}
body.maximized .scene.active {
	max-width: var(--fs-max);
	margin-left: auto;
	margin-right: auto;
}
#app:fullscreen .scene.active {
max-width:var(--fs-max);
margin-left:auto;
margin-right:auto;
}
#app:-webkit-full-screen .scene.active {
max-width:var(--fs-max);
margin-left:auto;
margin-right:auto;
}
/* ---- cross-game overrides (from pet/index-new.cfm style block) ---- */
.menu-blurb {
	text-align: center;
	font-size: 20px;
	margin: 0 5px 20px;
	color: var(--ink);
	font-weight: 600
}
.mode-card p {
	margin: 0;
	font-size: 16px;
	color: var(--ink)
}
.badge-shelf {
	margin-top: 15px
}
.btn.focus, .btn:focus {
	color: var(--cream);
	text-decoration: none
}
/* hover split out and guarded: on touch, :hover sticks after a tap */
@media (hover: hover) {
.btn:hover {
	color: var(--cream);
	text-decoration: none
}
}
h3 {
	font-size: 20px
}
.badge {
	gap: 10px;
	width: 72px;
	font-size: 14px
}
.menu-foot {
	text-align: center;
	margin-top: 15px
}
.btn-ghost.focus, .btn-ghost:focus, .btn-ghost:hover {
	color: var(--ink)
}
#game-title-bar h1 {
	border: 2px solid #E4B25A;
	border-radius: 16px;
	padding: 6px 18px;
}
.parents-row {
	text-align: center;
	margin: 15px 0 20px;
}
#seasonLog li {
	display: grid;
	grid-template-columns: 80px 1fr auto;
	gap: 12px;
}
.l-math {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.math-main {
	font-weight: 600;
}
.math-sub {
	color: #555;
}
#fText {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.feedback-line {
	display: flex;
	align-items: center;
	gap: 6px;
}
.feedback-line-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	font-size: 1.35rem;
	line-height: 1;
	flex: 0 0 1.35rem;
}
#fEmoji {
	font-size: 1.35rem;
	line-height: 1;
}
.chart-log-key {
	font-weight: 700;
}
.chart-log-key span {
	white-space: nowrap;
}
.chart-summary {
	font-size: 16px;
	line-height: 1.4;
	margin-top: 15px;
}
.chart-summary__values {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	justify-content: center;
}
.chart-summary__values span {
	white-space: nowrap;
}
.chart-summary__explain {
	margin-top: 10px;
}
#chartHost {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
#chartHost svg {
	display: block;
	width: 100%;
	height: auto;
}
 @media (max-width: 480px) {
#chartHost {
	justify-content: flex-start;
}
#chartHost svg {
	min-width: 560px;
}
}
.feedback-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
}
 @media (max-width: 520px) {
#seasonLog li {
	grid-template-columns: 1fr auto;
}
.l-season {
	grid-column: 1 / -1;
}
}
.role-tag, h1 {
	font-weight: 700;
}
/* Results-screen "review with a grown-up" divider sitting above the season log
   and compounding chart that get carried down from the play screen at game end. */
.review-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 5px 0 1px;
	font-family: var(--display);
	font-size: 15px;
	color: var(--ink-soft)
}
.review-head::before, .review-head::after {
	content: "";
	flex: 1;
	height: 2px;
	border-radius: 1px;
	background: #E8DFBD
}
.review-head .ic {
	width: 1.1em;
	height: 1.1em;
	vertical-align: -0.15em;
	color: var(--leaf-deep)
}
#game-title-bar h1 .ic, .awning h1 .ic {
    margin-top: -10px;
}

/* Desktop-only UI zoom (was inline zoom:1.2 on <main id="app">). Touch devices excluded:
   zoom fights viewport media queries and pre-17.4 Safari mishandles position:fixed
   inside a zoomed subtree. */
@media (hover: hover) and (pointer: fine) {
  main#app { zoom: 1.2; }
}

/* Keep the fixed fullscreen button clear of the iPhone home-indicator swipe zone
   in standalone (Add to Home Screen) mode. env() resolves to 0 everywhere else. */
.fs-btn{right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom))}