.awning h1, .btn, .hud .chip, .mc-age, .mode-card h2 {
	font-family: var(--display)
}
.fs-btn, .linkish, .pet-choice, .starline-btn, .want {
	cursor: pointer
}
:root {

--radius:18px;
--app-max:520px;
--display:'Baloo 2', 'Arial Black', Arial, sans-serif;
--body:'Nunito', Arial, 'Helvetica Neue', sans-serif;
--app-max:520px;
--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);
--fs-max:1100px
}
* {
	box-sizing: border-box
}
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
}
.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)
}
#game-title-bar h1 .ic, .awning h1 .ic {
	color: var(--wood)
}
.icon-btn .ic {
	width: 22px;
	height: 22px;
	color: var(--ink)
}
#game-title-bar h1 .ic, .awning h1 .ic, .btn .ic {
	width: 1.05em;
	height: 1.05em
}
.btn .ic {
	vertical-align: -.14em
}
.b-icon .ic, .star-line .ic {
	width: 26px;
	height: 26px
}
.mode-card .mc-emoji-wrap .ic {
	width: 30px;
	height: 30px
}
.feedback.good, .mode-learner .mc-emoji-wrap .ic {
	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, #game-title-bar, .gtb-tab {
	position: relative
}

#app {max-width:var(--app-max);width:100%;margin:0 auto;padding:10px 12px 24px;position:relative;z-index:1}
#brandSlot {
	max-width: 520px;
	margin: 0 auto;
	padding: 4px 12px 0;
	min-height: 0
}
.scene {
	display: none;
	flex-direction: column;
	gap: 12px
}
.mode-card, .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 {
	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
}
.icon-btn:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 rgba(51,51,51,.15)
}
.mode-card:active, .pet-choice:active {
	transform: translateY(3px)
}
.hud .chip {
	border-radius: 999px;
	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, .mode-card p {
	color: var(--ink-soft)
}
.mode-card {
	align-items: center;
	gap: 14px;
	width: 100%;
	text-align: left;
	border: 4px solid transparent;
	border-radius: var(--radius);
	padding: 14px;
	box-shadow: 0 5px 0 rgba(51,51,51,.12)
}
.badge, .card {
	text-align: center
}
.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
}
#game-title-bar h1, .awning h1 {
	font-size: clamp(20px, 5.6vw, 28px);
	margin: 0;
	letter-spacing: .5px
}
.mode-card .mc-best {
	font-size: 12px;
	color: var(--leaf-deep);
	font-weight: 700;
	margin-top: 3px
}
.mc-age {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 6px;
	line-height: 1.1
}
.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 {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff3cd;
	border: 2px dashed var(--gold);
	border-radius: 14px;
	padding: 10px 14px;
	font-size: 15px
}
.awning h1, .badge-shelf {
	background: var(--paper)
}
.rush-row input {
	width: 22px;
	height: 22px;
	accent-color: var(--leaf-dark)
}
.badge-shelf {
	border-radius: var(--radius)
}
.badge-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center
}
.badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	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
}
.awning, .gtb-tab {
	align-items: center;
	display: flex
}
.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)
}
.awning h1 {
	color: var(--ink);
	border: 4px solid var(--wood);
	border-radius: 14px;
	padding: 6px 16px;
	box-shadow: 0 4px 0 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 {
	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;
	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
}
.fs-btn, .sheet {
	z-index: 50;
	position: fixed
}
#game-title-bar h1, .card {
	background: var(--paper);
	font-family: var(--display)
}
.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;
	color: var(--ink);
	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
}
.actions, .pots {
	display: flex;
	gap: 10px
}
.actions .btn, .hud .spacer {
	flex: 1
}
.card {
	border-radius: var(--radius);
	padding: 24px;
	font-size: 24px;
	min-height: 96px;
	display: flex;
	align-items: center;
	justify-content: center
}
.feedback {
	min-height: 24px;
	font-weight: 700;
	color: var(--ink)
}
.brief-goal, .pet-caption {
	font-weight: 800;
	text-align: center
}
.linkish {
	background: 0 0;
	border: 0;
	color: var(--navy);
	font-size: 14px;
	text-decoration: underline;
	min-height: 44px;
	padding: 6px 10px
}
.brief-card, .pet-choice {
	background: var(--paper);
	box-shadow: 0 5px 0 rgba(51,51,51,.12)
}
.pet-grid {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap
}
.pet-choice {
	border: 4px solid #e8dfbd;
	border-radius: var(--radius);
	padding: 10px 8px;
	width: 200px
}
.pet-choice:active {
	box-shadow: 0 2px 0 rgba(51,51,51,.12)
}
.pet-choice svg {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto
}
.pet-choice .pc-name {
	display: block;
	font-family: var(--display);
	font-size: 16px;
	margin-top: 4px;
	color: var(--ink)
}
.brief-card {
	border-radius: var(--radius);
	padding: 16px
}
.brief-card dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 12px;
	margin: 6px 0 10px
}
.brief-card dt {
	font-weight: 700;
	color: var(--ink)
}
.brief-card dd {
	margin: 0
}
.brief-card p, .sheet-card p {
	margin: 8px 0
}
#briefPet, #sumPet {
	width: 200px;
	max-width: 60%;
	margin: 0 auto
}
#briefPet svg, #petWrap svg, #sumPet svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 9px 5px rgba(110,78,38,.18))
}
.safe-note {
	background: #e8f1fa;
	border-radius: 12px;
	padding: 10px 14px;
	color: #145a9e;
	font-size: 15px;
	text-align: center
}
.brief-goal, .coach, .pet-caption {
	color: var(--ink)
}
.brief-goal {
	font-size: 17px;
	margin: 8px 6px 2px
}
.starline-btn {
	align-self: center;
	background: 0 0;
	border: 0;
	padding: 4px 14px;
	border-radius: 14px
}
.starline-btn:hover {
	background: rgba(51,51,51,.05)
}
.starline-btn:active {
	transform: translateY(1px)
}
.starline-btn::after {
    content: "?";
    font: 700 15px/1 var(--body);
    color: var(--navy);

    width: 24px;
    height: 24px;
    border: 2px solid var(--navy);
    border-radius: 50%;
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 8px;
    vertical-align: middle;
    padding-top: 1px;
}
.hud {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap
}
.pet-stage {
	display: flex;
	flex-direction: column;
	align-items: center
}
#petWrap {
	width: 204px;
	max-width: 64%
}
.pet-caption {
	min-height: 22px;
	margin: 4px 0 0;
	font-size: 16px
}
.pot {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: var(--radius);
	padding: 9px 12px;
	box-shadow: 0 4px 0 rgba(51,51,51,.1);
	border: 3px solid #e8dfbd
}
.pot-ic {
	flex: none;
	width: 34px;
	height: 34px
}
.pot-ic svg {
	width: 100%;
	height: 100%;
	display: block
}
.pot-body {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	min-width: 0
}
.pot .pot-lab {
	font-size: 12px;
	color: var(--ink-soft);
	font-weight: 700
}
.pot .pot-val, .stepper .sval {
	color: var(--leaf-deep);
	font-family: var(--display)
}
.pot .pot-val {
	font-size: 23px
}
.pot-cash {
	background: #fffbf0;
	border-color: #e0b84b
}
.pot-save {
	background: #f1faf2;
	border-color: #7fb98e
}
.coach {
	background: var(--paper);
	border-left: 5px solid var(--sun);
	border-radius: 12px;
	padding: 12px 14px;
	box-shadow: 0 3px 0 rgba(51,51,51,.1);
	min-height: 24px
}
.phase {
	background: #fffdf6;
	border-radius: var(--radius);
	padding: 15px 19px 17px;
	box-shadow: inset 0 0 0 2px #efe6c8
}
.phase h3 {
	font-family: var(--display);
	font-size: 17px;
	margin: 0 0 8px
}
.phase p {
	margin: 6px 0
}
.phase .btn, .sheet-card .btn {
	margin-top: 8px
}
#phasePrimary {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 14px auto 0
}
.stepper {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	margin: 10px 0
}
.stepper .sval {
	font-size: 22px;
	min-width: 90px;
	text-align: center
}
.want .w-cost, .want .w-lab {
	font-size: 12px;
	font-weight: 700
}
.fs-btn, .menu-blurb, .mode-card p, .want .w-lab {
	color: var(--ink)
}
.want-grid {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 14px 0 6px
}
.want {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	background: var(--paper);
	border: 3px solid #e8dfbd;
	border-radius: 14px;
	padding: 8px 6px;
	width: 98px;
	box-shadow: 0 4px 0 rgba(51,51,51,.1)
}
.want:active {
	transform: translateY(2px);
	box-shadow: 0 2px 0 rgba(51,51,51,.1)
}
.want[disabled] {
	opacity: .4;
	cursor: default
}
.want svg {
	width: 46px;
	height: 46px
}
.want .w-lab {
	text-align: center;
	line-height: 1.1
}
.want .w-cost {
	color: var(--leaf-deep)
}
.surprise-card {
	background: #fff3cd;
	border: 2px solid var(--gold);
	border-radius: var(--radius);
	padding: 12px;
	text-align: center
}
.surprise-card .sc-amt {
	font-family: var(--display);
	font-size: 26px;
	color: #6f5700;
	margin-top: 4px
}
.starline {
	font-size: 42px;
	text-align: center;
	line-height: 1
}
.btn-small, .h3, .menu-blurb, .sheet-card h2, h3 {
	font-size: 20px
}
.starline .off {
	opacity: .22
}
.starline .on {
	display: inline-block
}
#sumChart {
	max-width: 320px;
	margin: 8px auto 0
}
#sumChart svg {
	width: 100%;
	height: auto;
	display: block
}
@keyframes starPop {
from {
transform:scale(0) rotate(-25deg);
opacity:0
}
to {
	transform: none;
	opacity: 1
}
}
.sheet {
	inset: 0;
	background: rgba(0,0,0,.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px
}
.sheet[hidden] {
	display: none
}
.sheet-card {
	background: var(--paper);
	border-radius: var(--radius);
	padding: 18px;
	max-width: 440px;
	max-height: 86vh;
	overflow: auto;
	box-shadow: 0 8px 0 rgba(51,51,51,.2)
}
.sheet-card h2 {
	font-family: var(--display);
	margin: 0 0 8px
}
@keyframes rxPerk {
0%, 100% {
transform:translateY(0)
}
30% {
transform:translateY(-8px)
}
}
@keyframes rxMunch {
0%, 100% {
transform:translateY(0) rotate(0)
}
25% {
transform:translateY(2px) rotate(-2.5deg)
}
75% {
transform:translateY(2px) rotate(2.5deg)
}
}
@keyframes rxJoy {
0%, 100% {
transform:translateY(0) scale(1)
}
40% {
transform:translateY(-15px) scale(1.04)
}
}
@keyframes rxReady {
0%, 100%, 50% {
transform:translateY(0)
}
22% {
transform:translateY(-17px)
}
72% {
transform:translateY(-7px)
}
}
@keyframes rxLean {
0%, 100% {
transform:rotate(0)
}
50% {
transform:rotate(-4deg)
}
}
@keyframes potGlint {
0%, 100% {
box-shadow:0 4px 0 rgba(51,51,51,.1)
}
50% {
box-shadow:0 0 0 4px #9ccc9e, 0 4px 0 rgba(51,51,51,.1)
}
}
#petWrap.rx-perk {
	animation: .6s rxPerk
}
#petWrap.rx-munch {
	animation: .5s rxMunch
}
#petWrap.rx-joy {
	animation: .7s rxJoy
}
#petWrap.rx-ready {
	animation: .9s rxReady
}
#petWrap.rx-lean {
	animation: .7s rxLean
}
.pot-save.glint {
	animation: .7s potGlint
}
.mode-card, .pet-choice, .want {
	transition: transform .12s, box-shadow .12s
}
@media (hover:hover) {
.pet-choice:hover, .want:not([disabled]):hover {
	transform: translateY(-3px);
	box-shadow: 0 7px 0 rgba(51,51,51,.12)
}
.mode-card:hover {
	transform: translateY(-2px)
}
}
@keyframes sEnter {
from {
opacity:0;
transform:translateY(10px)
}
to {
	opacity: 1;
	transform: none
}
}
@media (prefers-reduced-motion:no-preference) {
.starline .on {
	animation: .5s cubic-bezier(.2, 1.6, .5, 1) backwards starPop
}
.starline .on:nth-child(2) {
	animation-delay: .12s
}
.starline .on:nth-child(3) {
	animation-delay: .24s
}
.scene.active>* {
	animation: .42s cubic-bezier(.2, .7, .3, 1) backwards sEnter
}
.scene.active>:nth-child(2) {
	animation-delay: .05s
}
.scene.active>:nth-child(3) {
	animation-delay: .1s
}
.scene.active>:nth-child(4) {
	animation-delay: .15s
}
.scene.active>:nth-child(5) {
	animation-delay: .2s
}
.scene.active>:nth-child(6) {
	animation-delay: .25s
}
}
@media (min-width:760px) {
:root {
--app-max:740px
}
#briefStart {
	align-self: center;
	width: 50%
}
#scene-week.active {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "bar bar" "pet pots" "pet coach" "phase phase";
	align-items: start
}
#scene-week .hud {
	grid-area: bar
}
#scene-week .pet-stage {
	grid-area: pet
}
#scene-week .pots {
	grid-area: pots
}
#scene-week .coach {
	grid-area: coach
}
#scene-week .phase {
	grid-area: phase
}
}
@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";
	grid-template-areas: "blurb blurb blurb" "lrn std ent" "badges badges badges" "foot foot foot"
}
#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
}
#scene-menu .menu-foot {
	grid-area: foot
}
}
@keyframes torsoBr {
0%, 100% {
transform:scale(1)
}
50% {
transform:scale(var(--bs))
}
}
@keyframes upperBr {
0%, 100% {
transform:translateY(0)
}
50% {
transform:translateY(var(--bt))
}
}
.torso {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: torsoBr var(--bd) ease-in-out infinite
}
.dtail-calm, .dtail-eag, .dtail-exc {
	transform-box: fill-box;
	transform-origin: 0% 82%
}
.upper {
	animation: upperBr var(--bd) ease-in-out infinite
}
.br-norm {
--bs:1.025;
--bt:-2px;
--bd:3.4s
}
.br-exc {
--bs:1.03;
--bt:-2.5px;
--bd:1.9s
}
.br-eag {
--bs:1.014;
--bt:-1.2px;
--bd:1.05s
}
@keyframes swing {
0%, 100% {
transform:rotate(0)
}
50% {
transform:rotate(var(--amp))
}
}
.dtail-exc {
--amp:-7deg;
	animation: .5s ease-in-out infinite swing
}
.dtail-calm {
--amp:-3.5deg;
	animation: 1.7s ease-in-out infinite swing
}
.dtail-eag {
--amp:-5deg;
	animation: .85s ease-in-out infinite swing
}
.ctail-calm, .ctail-eag, .ctail-exc {
	transform-origin: 0% 100%;
	transform-box: fill-box
}
.ctail-exc {
--amp:4deg;
	animation: 2.3s ease-in-out infinite swing
}
.ctail-calm {
--amp:2.5deg;
	animation: 2.8s ease-in-out infinite swing
}
.ctail-eag {
--amp:4.5deg;
	animation: 1.1s ease-in-out infinite swing
}
.rtail-exc {
	transform-box: fill-box;
	transform-origin: 0% 50%;
--amp:6deg;
	animation: .3s ease-in-out infinite swing
}
.nose-wiggle {
	animation: .45s ease-in-out infinite wiggle
}
@keyframes wiggle {
0%, 100% {
transform:translateY(0)
}
50% {
transform:translateY(-1px)
}
}
@keyframes fleahop {
0%, 100% {
transform:translateY(0)
}
50% {
transform:translateY(-3px)
}
}
.flea {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: fleahop var(--fd, .4s) ease-in-out infinite
}
@keyframes blink {
0%, 100%, 93% {
transform:scaleY(1)
}
96.5% {
transform:scaleY(.08)
}
}
.blink {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	animation: blink var(--bkd, 4.6s) ease-in-out infinite
}
.ear-active, .ear-lazy, .ear-normal {
	transform-box: fill-box;
	transform-origin: 50% 100%
}
@keyframes eartwitch {
0%, 100%, 90% {
transform:rotate(0)
}
94% {
transform:rotate(var(--tw, -7deg))
}
}
.ear-normal {
--tw:-7deg;
	animation: 6.5s ease-in-out infinite eartwitch
}
.ear-active {
--tw:-9deg;
	animation: 4.2s ease-in-out infinite eartwitch
}
.ear-lazy {
--tw:-5deg;
	animation: 9s ease-in-out infinite eartwitch
}
@keyframes headtilt {
0%, 100%, 28%, 93% {
transform:rotate(8deg)
}
43%, 79% {
transform:rotate(-8deg)
}
}
.headtilt {
	transform-box: view-box;
	transform-origin: 50% 57.4%;
	transform: rotate(8deg);
	animation: 7s ease-in-out infinite headtilt
}
@keyframes twinkle {
0%, 100% {
transform:scale(.85) rotate(-6deg);
opacity:.78
}
50% {
transform:scale(1.1) rotate(6deg);
opacity:1
}
}
.twinkle {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	animation: 1.9s ease-in-out infinite twinkle
}
@media (prefers-reduced-motion:reduce) {
*, :after, :before {
	animation-duration: .01ms!important;
	transition-duration: .01ms!important
}
#petWrap.rx-joy, #petWrap.rx-lean, #petWrap.rx-munch, #petWrap.rx-perk, #petWrap.rx-ready, .blink, .ctail-calm, .ctail-eag, .ctail-exc, .dtail-calm, .dtail-eag, .dtail-exc, .ear-active, .ear-lazy, .ear-normal, .flea, .headtilt, .nose-wiggle, .pot-save.glint, .rtail-exc, .torso, .twinkle, .upper {
	animation: none
}
.flea {
	display: none
}
}
.fs-btn {
	right: 12px;
	bottom: 12px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--paper, #fff);
	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
}
.menu-blurb {
	text-align: center;
	margin: 0 5px 20px;
	font-weight: 600
}
.mode-card p {
	margin: 0;
	font-size: 16px
}
.badge-shelf {
	background: var(--paper);
	border-radius: var(--radius);
	padding: 12px 14px;
	box-shadow: 0 5px 0 rgba(51,51,51,.12);
	margin-top: 15px
}
.btn.focus, .btn:focus, .btn:hover {
	color: var(--ink-soft);
	text-decoration: none;
	color: var(--cream)
}
.badge {
	gap: 10px;
	width: 72px;
	font-size: 12px
}
.menu-foot {
	text-align: center;
	margin-top: 15px
}
#game-title-bar h1 {
	border: 2px solid #e4b25a;
	border-radius: 16px;
	padding: 6px 18px
}
.brief-card {
	margin-bottom: 10px
}
.hud .chip {
	font-size: 15px;
	padding: 8px 14px
}
.hud {
	gap: 10px;
	margin-bottom: 15px
}
.btn-ghost.focus, .btn-ghost:focus, .btn-ghost:hover, .btn-small.focus, .btn-small:focus, .btn-small:hover {
	color: var(--wood)
}
.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; }
}

/* invisible enlargement to the 44px touch-target minimum (background is transparent) */
.starline-btn{min-width:44px;min-height:44px}