#app .awning h1, #game-title-bar h1, .awning h1 {
	font-size: clamp(20px, 5.6vw, 28px);
	color: var(--ink);
	background: var(--paper);
	letter-spacing: .5px;
	margin: 0;
	font-family: var(--display)
}
.btn, .mc-age {
	font-weight: 700
}
.brief-mode, .budget-box .lbl {
	text-transform: uppercase;
	font-size: 16px
}
#app .awning h1, #game-title-bar h1, .awning h1, .brief-head h2, .btn, .budget-box .big, .hud .chip, .item-price, .mc-age, .mode-card h2, .notepad-top, .store-cat h3, .wallet-amt {
	font-family: var(--display)
}
.fs-btn, button {
	cursor: pointer
}
.budget-bar, .notepad, .receipt, .result-receipt, body.maximized {
	overflow: hidden
}
:root {

--radius:18px;
--display:'Baloo 2', 'Arial Black', Arial, sans-serif;
--body:'Nunito', Arial, 'Helvetica Neue', sans-serif;
--awn-stripe:#FFE069;
--awn-gap:#FFFFFF;
--awn-rail:#FBCB45;
--awn-edge:#E4B25A;
--awn-band:30px;
--awn-sw:26px;
--awn-shadow:0 5px 5px -4px rgba(122,86,28,.28);
--app-max:920px;
--fs-max:1100px
}
#app .awning, .awning, .gtb-tab {
	display: flex;
	align-items: center
}
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:focus-visible, input:focus-visible {
outline:3px solid var(--navy);
outline-offset:2px
}
h1, h2, h3 {
	font-weight: 600
}
strong {
	font-weight: 800
}
#app .awning, .awning {
	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,.1)
}
#app .awning h1, .awning h1 {
	border: 4px solid var(--wood);
	border-radius: 14px;
	padding: 6px 16px;
	box-shadow: 0 4px 0 var(--wood)
}
#game-title-bar h1 .ic, .awning h1 .ic {
	width: 1.05em;
	height: 1.05em;
	color: var(--wood)
}
.awning h1 .ic {
	vertical-align: -.12em
}
:focus-visible {
outline:3px solid var(--navy);
outline-offset:2px
}
.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::before, .gtb-tab {
background:repeating-linear-gradient(90deg, var(--awn-stripe) 0 var(--awn-sw), var(--awn-gap) var(--awn-sw) calc(var(--awn-sw)*2));
	box-shadow: var(--awn-shadow)
}
#game-title-bar {
	position: relative;
	margin: 0 0 16px;
	background: 0 0
}
#game-title-bar::before {
	content: "";
	display: block;
	height: var(--awn-band);
	background-attachment: fixed;
	border-top: 2px solid var(--awn-edge);
	border-bottom: 3px solid var(--awn-rail)
}
.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-attachment: fixed;
	border: none;
	border-bottom: 3px solid var(--awn-rail);
	border-radius: 0 0 22px 22px;
	justify-content: center
}
.gtb-tab::after, .gtb-tab::before {
	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) + .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) + .5px))
}
#game-title-bar h1 {
	position: relative;
	border: 4px solid var(--wood);
	box-shadow: 0 3px 0 rgba(110,72,30,.22);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	border: 2px solid #e4b25a;
	border-radius: 16px;
	padding: 6px 18px
}
button {
	font-family: inherit
}
[tabindex]:focus-visible, button:focus-visible {
outline:3px solid var(--navy);
outline-offset:2px
}
.ic {
	width: 1.15em;
	height: 1.15em;
	display: inline-block;
	vertical-align: -.2em;
	flex: none;
	color: inherit;
	fill: currentColor
}
.badge-shelf h3 .ic, .chip-stars .ic, .ic-star, .mode-standard .mc-emoji-wrap .ic {
	color: var(--gold)
}
.icon-btn .ic {
	width: 22px;
	height: 22px;
	color: var(--ink);
	pointer-events: none
}
.btn .ic {
	width: 1.05em;
	height: 1.05em;
	vertical-align: -.14em
}
.mode-card .mc-emoji-wrap .ic {
	width: 30px;
	height: 30px
}
.b-icon .ic, .coach.alert .ic, .star-line .ic {
	width: 26px;
	height: 26px
}
.list li.met .tick, .mode-learner .mc-emoji-wrap .ic, .r-row.left .num {
	color: var(--leaf-deep)
}
.chip-streak, .chip-streak .ic, .mode-entrepreneur .mc-emoji-wrap .ic {
	color: var(--berry-dark)
}
.star-line .ic {
	color: var(--gold)
}
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap
}
#app, .notepad-list, .result-receipt {
	position: relative
}
#app {
	max-width: var(--app-max);
	width: 100%;
	margin: 0 auto;
	padding: 10px 12px 24px
}
.scene {
	display: none;
	flex-direction: column;
	gap: 12px
}
.mode-card, .over-flag.show, .scene.active {
	display: flex
}
.btn {
	transition: transform .06s, box-shadow .06s
}
.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-ghost, .hud .chip, .icon-btn, .mode-card {
	background: var(--paper)
}
.btn-berry:active {
	box-shadow: 0 1px 0 #8e2323
}
.btn-ghost {
	color: var(--ink);
	box-shadow: 0 5px 0 #d7cfae;
	border: 2px solid #e8dfbd;
	font-size: 15px
}
.btn-ghost:active {
	box-shadow: 0 1px 0 #d7cfae
}
.btn-small {
	font-size: 16px;
	padding: 9px 14px;
	min-height: 44px
}
.icon-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	box-shadow: 0 3px 0 rgba(51,51,51,.15);
	font-size: 19px;
	line-height: 1
}
.badge-shelf, .mode-card {
	box-shadow: 0 5px 0 rgba(51,51,51,.12)
}
.icon-btn:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 rgba(51,51,51,.15)
}
.add-btn:active, .mode-card:active, .st-btn:active {
	transform: translateY(3px)
}
.hud .chip {
	font-size: 16px;
	border-radius: 999px;
	padding: 7px 12px;
	box-shadow: 0 3px 0 rgba(51,51,51,.12)
}
.badge.earned .b-icon, .mode-learner .mc-emoji-wrap {
	background: var(--sun)
}
.chip-stars {
	color: #806000
}
.menu-blurb {
	text-align: center;
	font-size: 16px;
	margin: 0 4px;
	color: var(--ink)
}
.mode-card {
	align-items: center;
	gap: 14px;
	width: 100%;
	text-align: left;
	border: 4px solid transparent;
	border-radius: var(--radius);
	padding: 14px;
	transition: transform .06s
}
.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-size: 19px;
	margin: 0
}
.mode-card p {
	margin: 0;
	font-size: 16px;
	color: var(--ink-soft)
}
.mode-card .mc-best {
	font-size: 16px;
	color: var(--leaf-deep);
	font-weight: 700;
	margin-top: 3px
}
.mc-age {
	display: block;
	font-size: 15px;
	color: var(--ink);
	margin: 0 0 6px;
	line-height: 1.1
}
.badge, .badge-row, .mc-text, .rush-row {
	display: flex
}
.mode-learner {
	border-color: 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 {
	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
}
.badge-row {
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center
}
.badge {
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 72px;
	font-size: 11px;
	text-align: center;
	color: var(--ink-soft);
	background: 0 0;
	border-radius: 0;
	padding: 0;
	min-width: 0;
	white-space: normal;
	font-weight: 400;
	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: #eee;
	filter: grayscale(1);
	opacity: .55;
	border: 3px solid #ddd
}
.badge.earned .b-icon {
	filter: none;
	opacity: 1;
	border-color: var(--gold)
}
.badge.earned {
	color: var(--ink);
	font-weight: 700
}
@media (min-width:760px) {
:root {
--app-max:740px
}
}
.menu-blurb {
	margin-bottom: 2px
}
.mc-text {
	flex-direction: column;
	gap: 2px
}
.parent-link {
	align-self: center;
	margin-top: 2px;
	color: var(--navy);
	font-weight: 700;
	text-decoration: underline;
	padding: 11px 14px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	border-radius: 12px
}
.actions, .hud {
	display: flex;
	gap: 8px
}
.hud {
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 20px
}
.coach:empty, .hud[hidden], .play-hint[hidden], .result-talk:empty, .saved-stamp[hidden] {
	display: none
}
.hud .spacer {
	flex: 1
}
.actions {
	flex-wrap: wrap
}
.actions .btn {
	flex: 1;
	min-width: 150px
}
.brief-head, .notepad-top {
	align-items: center;
	display: flex
}
.brief {
	background: var(--paper);
	border-radius: var(--radius);
	padding: 18px;
	box-shadow: 0 5px 0 rgba(51,51,51,.1)
}
/*.brief-mode, .list li {
	background: var(--cream)
}*/
.brief-head {
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 2px
}
.brief-head h2 {
	font-size: 24px;
	margin: 0
}
.brief-mode {
	font-weight: 800;
	letter-spacing: .6px;
	color: var(--ink);
	border: 2px solid var(--wood-light);
	border-radius: 999px;
	padding: 3px 10px
}
.brief-blurb {
	margin: 0 0 14px;
	color: var(--ink-soft)
}
.notepad-top, .notepad-top .ic, .receipt-head .ic, .result-talk b {
	color: var(--wood)
}
.notepad {
	background: #fffdf5;
	border-radius: 14px;
	border: 2px solid #e0d6b0;
	box-shadow: 0 4px 0 rgba(51,51,51,.07)
}
.notepad-top {
	gap: 8px;
	font-size: 15px;
	padding: 9px 16px;
	background: #f3e9c8;
	border-bottom: 2px dashed #d9cfa8
}
.list li, .notepad-list li {
	color: var(--ink);
	font-weight: 700
}
.notepad-list {
	list-style: none;
	margin: 0;
	padding: 6px 16px 12px 40px
}
.notepad-list::before {
	content: "";
	position: absolute;
	left: 28px;
	top: 6px;
	bottom: 8px;
	width: 2px;
	background: #e2543e;
	opacity: .45
}
.fs-btn .ic, .result-done .ic {
	width: 22px;
	height: 22px
}
.notepad-list li {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px 0;
	font-size: 16px;
	border-bottom: 1px solid #efe7cc;
	opacity: 0;
	transform: translateY(6px);
	animation: .35s forwards padIn
}
.notepad-list li:last-child {
	border-bottom: 0
}
.notepad-list li .box {
	width: 18px;
	height: 18px;
	flex: none;
	border: 2.5px solid var(--wood);
	border-radius: 5px;
	background: #fff
}
.notepad-list li:first-child {
	animation-delay: .04s
}
.notepad-list li:nth-child(2) {
	animation-delay: .1s
}
.notepad-list li:nth-child(3) {
	animation-delay: .16s
}
.notepad-list li:nth-child(4) {
	animation-delay: .22s
}
.notepad-list li:nth-child(5) {
	animation-delay: .28s
}
.notepad-list li:nth-child(6) {
	animation-delay: .34s
}
@keyframes padIn {
to {
opacity:1;
transform:translateY(0)
}
}
.wallet {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	background: #c8e6c9;
	border-radius: 14px;
	padding: 18px 24px;
	margin: 14px 0
}
.wallet-art {
	width: 120px;
	height: 90px;
	flex: 0 0 auto
}
.cart-flourish, .item-art, .item-art svg {
	width: 54px;
	height: 54px
}
.wallet-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	text-align: left
}
.coach.alert, .result, .st-val {
	text-align: center
}
.wallet-lab, .wallet-sub {
	font-size: 18px;
	color: var(--leaf-deep)
}
.wallet-amt {
	font-size: 34px;
	color: var(--leaf-deep)
}
@media (max-width:520px) {
.wallet, .wallet-text {
	text-align: center
}
.wallet {
	flex-direction: column;
	gap: 8px
}
}
.btn-go {
	font-size: 18px;
	min-height: 54px
}
@media (prefers-reduced-motion:reduce) {
*, :after, :before {
	animation-duration: NaNs!important;
	transition-duration: NaNs!important
}
.notepad-list li {
	opacity: 1;
	transform: none;
	animation: none
}
}
.pretend-note {
	font-size: 17px;
	font-weight: 600;
	color: var(--ink-soft);
	background: #e8f1fa;
	border-radius: 12px;
	padding: 8px 12px
}
.goal, .item-row {
	background: var(--paper)
}
.pretend-note .ic {
	color: var(--navy);
	vertical-align: -.2em
}
.budget-box .lbl, .item-desc, .list li .tick {
	color: var(--ink-soft)
}
.goal {
	border-radius: var(--radius);
	padding: 12px 14px;
	box-shadow: 0 5px 0 rgba(51,51,51,.1)
}
.goal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px
}
.budget-box, .store {
	flex-direction: column;
	display: flex
}
.budget-box {
	line-height: 1.05
}
.budget-box .lbl {
	letter-spacing: .5px
}
.budget-box .big {
	font-size: 28px;
	color: var(--leaf-deep);
	margin-top: 5px
}
.cart-flourish .fill {
	transition: height .35s cubic-bezier(.34, 1.56, .64, 1)
}
.list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px
}
.list li {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	border: 2px solid var(--wood-light);
	border-radius: 999px;
	padding: 4px 11px
}
.item-name, .store-cat h3 {
	font-size: 16px
}
.item-name, .item-tag, .over-flag {
	font-weight: 800
}
.list li .tick {
	width: 16px;
	height: 16px;
	flex: none
}
.list li.met {
	background: #c8e6c9;
	border-color: var(--leaf-deep);
	color: var(--leaf-deep)
}
.store {
	gap: 18px
}
.store-cat {
	display: flex;
	flex-direction: column;
	gap: 10px
}
.item-row, .stepper {
	align-items: center
}
.store-cat h3 {
	margin: 0 0 2px;
	color: var(--wood)
}
.item-row {
	display: flex;
	gap: 10px;
	border-radius: 14px;
	padding: 10px 12px;
	box-shadow: 0 3px 0 rgba(51,51,51,.08)
}
.item-art {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center
}
.item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px
}
.item-desc {
	font-size: 14px
}
.item-price {
	font-size: 15px;
	color: var(--leaf-deep)
}
.item-tag {
	display: inline-block;
	font-size: 11px;
	border-radius: 6px;
	padding: 1px 6px;
	margin-left: 6px;
	vertical-align: 1px
}
.tag-sale {
	background: #fff3cd;
	color: #6f5700
}
.tag-unit {
	background: #e8f1fa;
	color: #145a9e
}
.add-btn, .st-btn {
	color: var(--paper);
	font-family: var(--display)
}
.item-ctrl {
	flex: none
}
.add-btn {
	font-size: 14px;
	min-height: 44px;
	min-width: 64px;
	border: 0;
	border-radius: 12px;
	background: var(--leaf-deep);
	box-shadow: 0 4px 0 #143d26
}
.add-btn:active {
	box-shadow: 0 1px 0 #143d26
}
.stepper {
	display: flex;
	gap: 8px
}
.st-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	font-size: 20px;
	line-height: 1;
	background: var(--navy);
	box-shadow: 0 4px 0 #0d3b66
}
.st-btn:active {
	box-shadow: 0 1px 0 #0d3b66
}
.st-val {
	font-family: var(--display);
	font-size: 18px;
	min-width: 26px
}
.play-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff3cd;
	border: 2px dashed var(--gold);
	border-radius: 14px;
	padding: 9px 12px;
	font-size: 14px;
	color: #6f5700
}
.play-hint .ic {
	color: #6f5700;
	flex: none
}
.play-hint button {
	margin-left: auto;
	border: 0;
	background: 0 0;
	color: #6f5700;
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
	min-width: 32px;
	min-height: 32px
}
.receipt {
	background: var(--paper);
	border-radius: 8px;
	padding: 0 0 12px;
	box-shadow: 0 5px 0 rgba(51,51,51,.12)
}
.receipt-top {
	height: 12px;
	background: radial-gradient(circle at 8px 12px, transparent 6px, var(--paper) 6px) 0 0/16px 12px repeat-x;
	background-color: var(--cream)
}
.receipt-head {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--display);
	font-size: 18px;
	color: var(--wood);
	padding: 8px 14px 4px;
	border-bottom: 2px dashed #e0d6b0;
	margin-bottom: 10px
}
.receipt-lines {
	list-style: none;
	margin: 0;
	padding: 6px 14px;
	min-height: 40px
}
.receipt-lines li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-size: 16px;
	padding: 3px 0
}
.receipt-lines li .r-name {
	font-weight: 700
}
.receipt-lines li .r-qty {
	color: var(--ink-soft);
	font-size: 14px;
	font-weight: 700
}
.receipt-lines li .r-leader {
	flex: 1;
	border-bottom: 2px dotted #d9cfa8;
	margin: 0 4px;
	transform: translateY(-3px)
}
.receipt-lines li .r-price {
	font-family: var(--display);
	font-size: 14px;
	color: var(--ink)
}
.receipt-lines .r-empty {
	color: var(--ink-soft);
	font-style: italic;
	font-weight: 400
}
.over-flag, .over-flag .ic, .r-row.left.over .num {
	color: #6f5700
}
.receipt-foot {
	border-top: 2px solid var(--ink);
	margin: 4px 14px 0;
	padding-top: 15px
}
.r-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-family: var(--display);
	font-size: 16px;
	margin-bottom: 5px
}
.r-row.total .num {
	color: var(--ink)
}
.budget-bar {
	margin-top: 8px;
	height: 14px;
	border-radius: 999px;
	background: #efe7cc;
	border: 1px solid #e0d6b0
}
.budget-fill {
	height: 100%;
	width: 0;
	background: var(--leaf-deep);
	transition: width .25s
}
.budget-fill.over {
	background: var(--berry-dark)
}
.over-flag {
	display: none;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	background: #fff3cd;
	border-radius: 10px;
	padding: 6px 10px;
	font-size: 16px
}
.coach {
	min-height: 20px;
	background: #e8f1fa;
	border-radius: 12px;
	padding: 9px 12px;
	font-size: 14px;
	color: var(--navy);
	font-weight: 700
}
.coach.good, .result-saved {
	background: #c8e6c9;
	color: var(--leaf-deep)
}
.result, .result-receipt {
	background: var(--paper)
}
.coach.alert {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #fff3cd;
	color: #6f5700;
	border: 2px solid var(--gold);
	font-size: 17px;
	padding: 14px 16px
}
.coach.alert .ic {
	flex: none;
	color: #6f5700
}
.result {
	border-radius: var(--radius);
	padding: 18px;
	box-shadow: 0 5px 0 rgba(51,51,51,.1)
}
.result-title {
	font-family: var(--display);
	font-size: 28px;
	margin: 0 0 2px;
	color: var(--ink)
}
.result-done, .result-done .ic, .saved-stamp {
	color: var(--leaf-deep)
}
.result .star-line {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 6px 0 8px
}
.result .star-line .ic {
	width: 42px;
	height: 42px;
	opacity: .26
}
.result .star-line .ic.on {
	opacity: 1;
	transform-origin: center;
	animation: .45s cubic-bezier(.2, 1.5, .4, 1) both starPop
}
.result .star-line .ic.on:first-child {
	animation-delay: .05s
}
.result .star-line .ic.on:nth-child(2) {
	animation-delay: .17s
}
.result .star-line .ic.on:nth-child(3) {
	animation-delay: .29s
}
@keyframes starPop {
from {
transform:scale(.3)
}
to {
	transform: scale(1)
}
}
.result-done {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-weight: 800;
	margin: 0 0 12px
}
.result-receipt {
	border-radius: 8px;
	border: 2px solid #e0d6b0;
	box-shadow: 0 4px 0 rgba(51,51,51,.08);
	text-align: left;
	max-width: 360px;
	margin: 0 auto
}
.result-receipt .receipt-foot {
	padding-bottom: 6px
}
.saved-stamp {
	display: block;
	width: max-content;
	max-width: 90%;
	margin: 2px auto 20px;
	transform: rotate(-3deg);
	font-family: var(--display);
	font-size: 16px;
	border: 3px solid var(--leaf-deep);
	border-radius: 8px;
	padding: 4px 12px;
	background: #fff;
	letter-spacing: .5px
}
.result-coach {
	background: #e8f1fa;
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 16px;
	color: var(--navy);
	font-weight: 700;
	margin: 12px 0 0
}
.result-talk {
	background: var(--cream);
	border: 2px solid var(--wood-light);
	border-radius: 12px;
	padding: 9px 12px;
	font-size: 16px;
	color: var(--ink);
	margin: 15px 0;
	text-align: left
}
.result .actions {
	margin-top: 18px
}
@media (min-width:960px) {
:root {
--app-max:920px
}
#scene-brief, #scene-menu, #scene-result, #scene-summary {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto
}
#scene-menu.active {
	max-width: 880px;
	display: grid;
	gap: 20px 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
}
#gameHud {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto
}
#scene-play.active {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 14px;
	align-items: start;
	grid-template-areas: "hint    hint" "goal    receipt" "store   receipt" "coach   coach" "actions actions"
}
#scene-play .play-hint {
	grid-area: hint
}
#scene-play .goal {
	grid-area: goal
}
#scene-play .receipt {
	grid-area: receipt;
	position: sticky;
	top: 10px
}
#scene-play .store {
	grid-area: store
}
#scene-play .coach {
	grid-area: coach
}
#scene-play .actions {
	grid-area: actions
}
#scene-menu.active {
	grid-template-areas: "blurb blurb blurb" "lrn std ent" "badges badges badges" "link link link"
}
#scene-menu .parent-link {
	grid-area: link;
	justify-self: center
}
}
.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);
	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 {
	display: block
}
@media (max-width:759px) {
#app {
	padding-bottom: 72px
}
}
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)
}
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
}
.parents-row {
	text-align: center;
	margin: 15px 0 20px
}
.dinner {
	background: #e8f1fa;
	border: 3px dashed var(--navy);
	border-radius: 16px;
	padding: 12px 14px;
	margin: 15px 0
}
.dinner h3 {
	color: var(--navy);
	margin: 0 0 4px
}
.dinner p {
	margin: 0;
	font-size: 15px;
	line-height: 1.45
}
.role-tag, h1 {
	font-weight: 700;
}


/*@media (min-width: 960px) {
  #scene-menu .parents-row {
    grid-area: parents;
  }
}
.parents-row {
    text-align: center;
    margin: 15px 0 20px;
}
.role-tag, h1 {font-weight: 700;}*/

/* 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; }
}