#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;
	font-family: var(--display);
	margin: 0
}
#app .awning h1, #game-title-bar h1, .awning h1, .btn, .hud .chip, .mode-card h2 {
	font-family: var(--display)
}
.fs-btn, button {
	cursor: pointer
}
: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:520px;
--fs-max:1100px
}
#app .awning, .awning, .gtb-tab {
	display: flex;
	align-items: center
}
* {
	box-sizing: border-box
}
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
}
button:focus-visible, input:focus-visible {
outline:3px solid var(--navy);
outline-offset:2px
}
h1 {
	font-weight: 600
}
.btn, .mc-age, h2, h3 {
	font-weight: 700
}
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)
}
.card h3, .lr-label, .saved-line .sl-lab {
	text-transform: uppercase;
	letter-spacing: 1px
}
.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)
}
#app, .level-cards .mode-card {
	position: relative
}
.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
}
.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)
}
.btn .ic {
	width: 1.05em;
	height: 1.05em;
	vertical-align: -.14em
}
.b-icon .ic, .star-line .ic {
	width: 26px;
	height: 26px
}
.mode-card .mc-emoji-wrap .ic {
	width: 30px;
	height: 30px
}
.mode-learner .mc-emoji-wrap .ic {
	color: var(--leaf-deep)
}
.chip-streak, .chip-streak .ic, .history .h-amt.spend, .mode-entrepreneur .mc-emoji-wrap .ic {
	color: var(--berry-dark)
}
.star-line .ic {
	color: var(--gold)
}
.btn-ghost.focus, .btn-ghost:focus, .btn-ghost:hover, .mode-card p {
	color: var(--ink-soft)
}
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap
}
#app {
	max-width: var(--app-max);
	width: 100%;
	margin: 0 auto;
	padding: 10px 12px 24px
}
#confetti, .fs-btn, .party-veil, .sheet-veil {
	position: fixed
}
.scene {
	display: none;
	flex-direction: column;
	gap: 14px
}
.level-cards .mode-card[aria-pressed=true] .mc-check, .mode-card, .party-veil.open, .scene.active, .sheet-veil.open {
	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: 17px
}
.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, .card, .goal-card, .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)
}
.goal-card:active, .mode-card:active, .stepper .st-btn:active {
	transform: translateY(3px)
}
.hud .chip {
	font-size: 13px;
	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
}
.card h2, .card h3 {
	margin: 0 0 8px;
	font-family: var(--display)
}
.mode-card .mc-best {
	font-size: 14px;
	color: var(--leaf-deep);
	font-weight: 700;
	margin-top: 3px
}
.badge.earned, .card h3, .mc-age {
	color: var(--ink)
}
.mc-age {
	display: block;
	font-family: var(--display);
	font-size: 15px;
	margin: 0 0 6px;
	line-height: 1.1
}
.badge, .badge-row, .hud, .rush-row {
	display: flex
}
.badge, .home-blurb {
	color: var(--ink-soft);
	text-align: center
}
.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;
	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 {
	font-weight: 700
}
@media (prefers-reduced-motion:reduce) {
*, :after, :before {
	animation-duration: NaNs!important;
	transition-duration: NaNs!important
}
}
@media (min-width:760px) {
:root {
--app-max:740px
}
}
.card {
	background: var(--paper);
	border-radius: var(--radius);
	padding: 14px
}
.link-btn, .notice {
	padding: 10px 14px
}
.card h2 {
	font-size: 17px
}
.card h3 {
	font-size: 18px
}
.hud {
	align-items: center;
	gap: 8px
}
.hud .spacer {
	flex: 1
}
.home-blurb {
	font-size: 15px;
	margin: 0;
	line-height: 1.45
}
.link-btn {
	background: 0 0;
	border: 0;
	color: var(--navy);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	min-height: 44px;
	border-radius: 10px
}
.notice {
	background: #fff3cd;
	border: 2px dashed var(--gold);
	border-radius: 14px;
	font-size: 18px;
	margin-top: 20px
}
.lr-label, .st-hint {
	font-size: 13px;
	color: var(--ink-soft)
}
.lr-label {
	display: block;
	font-family: var(--display);
	margin: 0 0 8px
}
.level-cards {
	display: flex;
	flex-direction: column;
	gap: 10px
}
.level-cards .mc-check {
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--leaf-deep);
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 0 #143d26
}
.level-cards .mc-check .ic {
	width: 15px;
	height: 15px;
	color: var(--paper)
}
.level-cards .mode-card[aria-pressed=true] {
	box-shadow: 0 5px 0 rgba(51,51,51,.12), 0 0 0 3px var(--leaf-deep)
}
.goal-card {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: var(--paper);
	border: 4px solid var(--sun);
	border-radius: var(--radius);
	padding: 12px;
	transition: transform .06s;
	margin-bottom: 10px
}
.jar-caption, .st-hint {
	margin: 8px 0 0;
	text-align: center
}
.goal-card .gc-icon {
	flex: 0 0 56px;
	height: 56px
}
.goal-card .gc-icon svg {
	width: 56px;
	height: 56px
}
.goal-card h2 {
	font-family: var(--display);
	font-size: 18px;
	margin: 0 0 3px
}
.goal-card .gc-bar {
	height: 12px;
	border-radius: 999px;
	background: #eee7cb;
	overflow: hidden;
	margin: 4px 0
}
.goal-card .gc-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #a87a00, #8a5a00);
	box-shadow: inset 0 2px 0 gold;
	transition: width .4s
}
.cat-item, .chip-btn {
	border: 3px solid #eee
}
.goal-card .gc-sub {
	font-size: 16px;
	color: var(--ink-soft);
	margin: 0
}
.goal-card .gc-done {
	color: var(--leaf-deep);
	font-weight: 700
}
.empty-state {
	text-align: center;
	padding: 12px 6px
}
.empty-state .es-art {
	font-size: 52px;
	line-height: 1
}
.empty-state p {
	color: var(--ink-soft);
	font-size: 15px;
	margin: 4px 0 0
}
.catalog {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px
}
.actions, .cat-item, .goal-head, .jar-stage, .plan-row, .saved-line, .stepper {
	display: flex
}
.cat-item {
	flex-direction: column;
	align-items: center;
	gap: 4px;
	border-radius: 14px;
	background: #fcfbf4;
	padding: 10px 4px;
	min-height: 96px
}
.cat-item svg {
	width: 48px;
	height: auto;
	max-width: 100%
}
.cat-item .ci-name {
	font-size: 14px;
	font-weight: 700;
	text-align: center
}
.cat-item[aria-pressed=true] {
	border-color: var(--leaf-deep);
	background: #eaf4ec
}
.stepper {
	align-items: center;
	justify-content: center;
	gap: 8px
}
.stepper .st-val {
	font-family: var(--display);
	font-size: 30px;
	min-width: 100px;
	text-align: center
}
.stepper .st-btn {
	width: 52px;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 0;
	font-family: var(--display);
	font-size: 20px;
	white-space: nowrap;
	background: var(--navy);
	color: var(--paper);
	box-shadow: 0 4px 0 #0d3b66
}
.stepper .st-btn:active {
	box-shadow: 0 1px 0 #0d3b66
}
.stepper .st-btn[disabled] {
	opacity: .4
}
.jar-caption, .jar-pct-pill {
	font-size: 15px;
	font-family: var(--display)
}
.jar-stage {
	flex-direction: column;
	align-items: center;
	padding: 6px 0 0
}
.jar-stage svg.jar {
	width: min(230px, 62vw);
	height: auto
}
.jar-fill-group {
	transition: transform .6s cubic-bezier(.22, .9, .3, 1.2)
}
.jar-caption {
	min-height: 22px
}
.jar-pct-pill {
	background: var(--paper);
	border-radius: 999px;
	padding: 4px 12px;
	box-shadow: 0 2px 0 rgba(51,51,51,.18)
}
.goal-head {
	align-items: center;
	gap: 10px
}
.goal-head .gh-icon svg {
	width: 44px;
	height: 44px
}
.goal-head h2 {
	font-family: var(--display);
	font-size: 24px;
	margin: 0;
	flex: 1
}
.saved-line {
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 4px 0 0
}
.saved-line .sl-box {
	text-align: center
}
.saved-line .sl-num {
	font-family: var(--display);
	font-size: 20px;
	color: var(--leaf-deep)
}
.saved-line .sl-lab {
	font-size: 11px;
	color: var(--ink-soft)
}
.date-callout .dc-when, .plan-row .pr-val {
	color: var(--leaf-deep);
	font-family: var(--display)
}
.plan-row {
	align-items: center;
	gap: 10px;
	margin: 8px 0
}
.plan-row .pr-icon {
	font-size: 20px;
	flex: 0 0 26px;
	text-align: center
}
.plan-row label {
	flex: 0 0 86px;
	font-size: 13px;
	font-weight: 700
}
.plan-row input[type=range] {
	flex: 1;
	accent-color: var(--leaf-dark);
	min-height: 32px
}
.plan-row .pr-val {
	flex: 0 0 64px;
	text-align: right;
	font-size: 16px
}
.date-callout {
	background: #eaf4ec;
	border: 2px solid var(--leaf-dark);
	border-radius: 14px;
	padding: 10px 14px;
	text-align: center;
	margin-top: 6px
}
.date-callout .dc-when {
	font-size: 22px
}
.date-callout .dc-sub {
	font-size: 16px;
	color: var(--ink)
}
.date-callout.warn {
	background: #fff3cd;
	border-color: var(--gold)
}
.date-callout.warn .dc-when {
	color: #6f5700
}
.actions {
	gap: 15px 8px;
	flex-wrap: wrap
}
.actions .btn {
	flex: 1;
	min-width: 140px
}
.chart-legend .cl, .history li {
	display: flex;
	align-items: center
}
.history li {
	gap: 8px;
	font-size: 18px;
	padding: 7px 0;
	border-bottom: 1px dashed #e8dfbd
}
.history li:last-child {
	border-bottom: 0
}
.history {
	list-style: none;
	margin: 0;
	padding: 0
}
.history .h-icon {
	flex: 0 0 24px;
	text-align: center
}
.history .h-amt {
	margin-left: auto;
	font-family: var(--display);
	font-size: 16px;
	color: var(--leaf-deep)
}
.chart-legend, .history .h-bal, .history .h-date, .party p {
	color: var(--ink-soft)
}
.history .h-date {
	font-size: 16px;
	flex: 0 0 58px;
	text-align: right
}
.history .h-bal {
	font-size: 16px;
	flex: 0 0 64px;
	text-align: right
}
.party, .sheet .warn-line, .sheet h2 {
	text-align: center
}
.chart-wrap svg {
	width: 100%;
	height: auto;
	display: block;
	max-width: 460px;
	margin-left: auto;
	margin-right: auto
}
.chart-wrap h3 {
	margin-bottom: 2px
}
#chartHost text {
	font-family: var(--body)
}
.chart-legend {
	display: flex;
	gap: 14px;
	font-size: 14px;
	justify-content: center;
	margin-top: 4px;
	flex-wrap: wrap
}
.chip-row, .src-row {
	gap: 8px;
	margin: 8px 0
}
.chart-legend .cl {
	gap: 5px
}
.cl .swatch {
	width: 18px;
	height: 4px;
	border-radius: 2px;
	display: inline-block
}
.sheet-veil {
	inset: 0;
	background: rgba(51,51,51,.55);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 80;
	padding: 16px
}
.sheet {
	background: var(--paper);
	border-radius: 22px;
	max-width: 540px;
	width: 100%;
	max-height: 86vh;
	overflow: auto;
	padding: 18px 16px 24px;
	box-shadow: 0 8px 0 rgba(0,0,0,.18)
}
.chip-btn, .src-btn {
	background: #fcfbf4
}
.sheet h2 {
	font-family: var(--display);
	font-size: 18px;
	margin: 0 0 10px
}
.chip-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center
}
.chip-btn {
	font-family: var(--display);
	font-size: 15px;
	border-radius: 999px;
	padding: 10px 16px;
	min-height: 46px
}
.chip-btn[aria-pressed=true] {
	border-color: var(--leaf-deep);
	background: #eaf4ec;
	color: var(--leaf-deep)
}
.src-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr)
}
.src-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	border: 3px solid #eee;
	border-radius: 14px;
	padding: 8px 4px;
	min-height: 64px;
	font-size: 14px;
	font-weight: 700
}
.src-btn .s-emoji {
	font-size: 22px
}
.src-btn[aria-pressed=true] {
	border-color: var(--navy);
	background: #e8f1fa;
	color: var(--navy)
}
.sheet .warn-line {
	background: #fff3cd;
	border: 2px dashed var(--gold);
	border-radius: 12px;
	padding: 9px 12px;
	font-size: 16px;
	color: #6f5700;
	font-weight: 700;
	margin: 8px 0
}
.sheet .actions {
	margin-top: 10px
}
.party-veil {
	inset: 0;
	background: rgba(51,51,51,.55);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 85
}
.party {
	background: var(--paper);
	border-radius: var(--radius);
	max-width: 380px;
	width: 100%;
	padding: 22px 18px;
	box-shadow: 0 8px 0 rgba(0,0,0,.25)
}
.party .p-big {
	font-size: 54px;
	animation: .5s bounceIn;
	position: relative
}
@keyframes bounceIn {
0% {
transform:scale(.3)
}
60% {
transform:scale(1.15)
}
100% {
transform:scale(1)
}
}
.party .p-big:before, .party .p-big:after {
	content: "✨";
	position: absolute;
	font-size: 22px;
	opacity: 0;
	animation: .9s ease-out .15s both coinSparkle
}
.party .p-big:before {
	top: -6px;
	left: -18px
}
.party .p-big:after {
	bottom: -2px;
	right: -20px;
	animation-delay: .3s
}
@keyframes coinSparkle {
0% {
opacity:0;
transform:scale(.4) rotate(-10deg)
}
40% {
opacity:1
}
100% {
opacity:0;
transform:scale(1.1) translateY(-10px) rotate(10deg)
}
}
.party h2 {
	font-family: var(--display);
	font-size: 21px;
	margin: 6px 0
}
.party p {
	font-size: 15px;
	margin: 0 0 14px
}
#confetti {
	inset: 0;
	pointer-events: none;
	z-index: 90
}
@media (min-width:430px) {
.catalog {
	gap: 10px
}
}
@media (min-width:960px) {
:root {
--app-max:900px
}
#scene-menu, #scene-summary {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto
}
#scene-menu.active {
	max-width: 880px;
	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-home #levelSeg .mode-card, #scene-menu .mode-card {
	flex-direction: column;
	text-align: center;
	align-items: center
}
#scene-home, #scene-new {
	margin-left: auto;
	margin-right: auto
}
#scene-new {
	max-width: 600px
}
#scene-home {
	max-width: 880px
}
#scene-home #levelSeg {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px
}
#scene-goal.active, #scene-home #goalList {
	display: grid;
	grid-template-columns: 1fr 1fr
}
#scene-home #levelSeg .mc-check {
	top: 8px;
	right: 8px
}
#scene-home #goalList {
	gap: 10px;
	align-items: start
}
#scene-home #goalList .goal-card {
	margin-bottom: 0
}
#scene-home #goalList .goal-card:only-child {
	grid-column: 1/-1
}
#scene-home #newGoalBtn {
	align-self: center;
	width: auto;
	padding-left: 52px;
	padding-right: 52px
}
#scene-goal.active {
	grid-template-areas: "hud     hud" "jar     plan" "jar     actions" "notice  notice" "chart   chart" "history history";
	align-items: start;
	gap: 14px
}
#scene-goal>.hud {
	grid-area: hud
}
#scene-goal>.card:not([id]) {
	grid-area: jar;
	align-self: start
}
#scene-goal>#planCard {
	grid-area: plan
}
#scene-goal>.actions {
	grid-area: actions
}
#scene-goal>#firstDepositHint {
	grid-area: notice
}
#scene-goal>#chartCard {
	grid-area: chart
}
#scene-goal>#historyCard {
	grid-area: history
}
}
.fs-btn {
	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 {
	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)
}
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
}
.role-tag, h1 {
	font-weight: 700;
}