/* Cute Town CSS code */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gposx { syntax: "<percentage>"; initial-value: 50%; inherits: false; }
@property --gposy { syntax: "<percentage>"; initial-value: 50%; inherits: false; }
html,body { min-height: 100vh; margin: 0; padding: 0; overflow: hidden; font-family: sans-serif; accent-color: pink; background: thistle; } button { user-select:none; }
main { position: absolute; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; user-select: none; /* based on getwaves.io */
	background: #690375 url('data:image/svg+xml,<svg preserveAspectRatio="none" viewBox="0 0 1440 690" xmlns="http://www.w3.org/2000/svg"><style> .path-0{ animation:pathAnim-0 20s linear infinite; } @keyframes pathAnim-0{ 0%{ d: path("M 0,700 L 0,175 C 279.5,124.75 559,74.5 799,87 C 1039,99.5 1239.5,174.75 1440,250 L 1440,700 L 0,700 Z"); } 25%{ d: path("M 0,700 L 0,175 C 290,204.25 580,233.5 820,246 C 1060,258.5 1250,254.25 1440,250 L 1440,700 L 0,700 Z"); } 50%{ d: path("M 0,700 L 0,175 C 269.5,193.75 539,212.5 779,225 C 1019,237.5 1229.5,243.75 1440,250 L 1440,700 L 0,700 Z"); } 75%{ d: path("M 0,700 L 0,175 C 276.5,211.75 553,248.5 793,261 C 1033,273.5 1236.5,261.75 1440,250 L 1440,700 L 0,700 Z"); } 100%{ d: path("M 0,700 L 0,175 C 279.5,124.75 559,74.5 799,87 C 1039,99.5 1239.5,174.75 1440,250 L 1440,700 L 0,700 Z"); } }</style><path d="M 0,700 L 0,175 C 279.5,124.75 559,74.5 799,87 C 1039,99.5 1239.5,174.75 1440,250 L 1440,700 L 0,700 Z" stroke="none" stroke-width="0" fill="%23CB429F" class="path-0"></path><style> .path-1{ animation:pathAnim-1 13s linear infinite; } @keyframes pathAnim-1{ 0%{ d: path("M 0,700 L 0,408 C 201,387.75 402,367.5 642,380 C 882,392.5 1161,437.75 1440,483 L 1440,700 L 0,700 Z"); } 25%{ d: path("M 0,700 L 0,408 C 200.5,380.75 401,353.5 641,366 C 881,378.5 1160.5,430.75 1440,483 L 1440,700 L 0,700 Z"); } 50%{ d: path("M 0,700 L 0,408 C 288,358.75 576,309.5 816,322 C 1056,334.5 1248,408.75 1440,483 L 1440,700 L 0,700 Z"); } 75%{ d: path("M 0,700 L 0,408 C 255,415.75 510,423.5 750,436 C 990,448.5 1215,465.75 1440,483 L 1440,700 L 0,700 Z"); } 100%{ d: path("M 0,700 L 0,408 C 201,387.75 402,367.5 642,380 C 882,392.5 1161,437.75 1440,483 L 1440,700 L 0,700 Z"); } }</style><path d="M 0,700 L 0,408 C 201,387.75 402,367.5 642,380 C 882,392.5 1161,437.75 1440,483 L 1440,700 L 0,700 Z" stroke="none" stroke-width="0" fill="%23eb91d1" class="path-1"></path></svg>') no-repeat; background-size: 100% 100%; }
main:after { position: absolute; width: 100%; height: 100%; content: ""; filter: brightness(1.5) contrast(1.5); mix-blend-mode: color-dodge; /* custom sparkle animation */
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 300 200"><defs><pattern id="sparse-dots" width="35" height="35" patternUnits="userSpaceOnUse"><rect width="1.5" height="1.5" fill="white"/><rect x="10" y="10" width="1" height="1" fill="white"/></pattern><filter id="glitter-engine" x="-20%" y="-20%" width="140%" height="140%"><feTurbulence type="fractalNoise" baseFrequency="0.15" numOctaves="2" result="noise"><animate attributeName="baseFrequency" values="0.15; 0.2; 0.15" dur="60s" repeatCount="indefinite"/></feTurbulence><feDisplacementMap in="SourceGraphic" in2="noise" scale="40" xChannelSelector="R" yChannelSelector="G" result="scattered"/><feColorMatrix in="scattered" type="matrix" values=" 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 15 -6" result="dots"/><feGaussianBlur in="dots" stdDeviation="5.5 0" result="blurX"/><feGaussianBlur in="dots" stdDeviation="0 5.5" result="blurY"/><feMerge result="cross"><feMergeNode in="blurX"/><feMergeNode in="blurY"/></feMerge></filter></defs><rect width="100%" height="100%" fill="%230a0a1a" /><rect width="100%" height="100%" fill="url(%23sparse-dots)" filter="url(%23glitter-engine)" /></svg>');
	background-size: 100% 100%; }
main:before { position: absolute; width: 100%; height: 100%; content: ""; /* lil house, tree, mountain */
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 200 100"><path d="M 0,150 L 0,75 L 15,55 L 30,75 L 30,150 z" fill="%23690375" /><path d="M 83,100 L 83,95 L 75,95 L 85,45 L 95,95 L 87,95 L 87,100 z" fill="%23690375" /><path d="M 110,100 L 140,60 L 160,80 L 170,65 L 200,100 z" fill="%23690375" /></svg>');
	background-size: 400px 200px; background-position: bottom center; background-repeat: no-repeat; }

.bubbleload { letter-spacing: 1px; background: #F2E863; } progress.assetloader { position: relative; bottom: 15px; z-index: 1; }
.bubblebox { padding: 1em 3em; animation-delay: random(0s, 60s); animation: 60s infinite alternate bubble; border: 5px solid #FFF; position: relative; margin-top: -5%; z-index: 1; }
@keyframes bubble {
	0% {	transform: none;							border-top-left-radius: 40% 50%; border-top-right-radius: 40% 50%; border-bottom-left-radius: 70% 50%; border-bottom-right-radius: 70% 70%; }
	12.5% {	transform: skew(3deg, -5deg);				border-top-left-radius: 60% 70%; border-top-right-radius: 80% 40%; border-bottom-left-radius: 50% 40%; border-bottom-right-radius: 80% 50%; }
	19% {	transform: skew(-3deg, 0deg) scale(1.05);	border-top-left-radius: 90% 90%; border-top-right-radius: 50% 90%; border-bottom-left-radius: 50% 40%; border-bottom-right-radius: 40% 90%; }
	27.5% {	transform: skew(1deg, 4deg) scale(1.05);	border-top-left-radius: 90% 80%; border-top-right-radius: 50% 80%; border-bottom-left-radius: 40% 50%; border-bottom-right-radius: 60% 40%; }
	34% {	transform: skew(4deg, -1deg);				border-top-left-radius: 70% 90%; border-top-right-radius: 50% 60%; border-bottom-left-radius: 90% 90%; border-bottom-right-radius: 50% 90%; }
	37% {	transform: skew(2deg, -2deg);				border-top-left-radius: 50% 50%; border-top-right-radius: 70% 40%; border-bottom-left-radius: 40% 80%; border-bottom-right-radius: 70% 80%; }
	45% {	transform: skew(-2deg, 3deg) scale(1.05);	border-top-left-radius: 90% 80%; border-top-right-radius: 90% 70%; border-bottom-left-radius: 90% 80%; border-bottom-right-radius: 70% 40%; }
	51.5% {	transform: skew(-5deg, 2deg) scale(1.05);	border-top-left-radius: 40% 90%; border-top-right-radius: 50% 90%; border-bottom-left-radius: 80% 90%; border-bottom-right-radius: 90% 80%; }
	55% {	transform: skew(-3deg, 5deg);				border-top-left-radius: 90% 40%; border-top-right-radius: 70% 50%; border-bottom-left-radius: 60% 70%; border-bottom-right-radius: 80% 50%; }
	63% {	transform: skew(-2deg, 3deg);				border-top-left-radius: 80% 90%; border-top-right-radius: 50% 70%; border-bottom-left-radius: 50% 40%; border-bottom-right-radius: 90% 60%; }
	69.5% {	transform: skew(3deg, -2deg);				border-top-left-radius: 40% 50%; border-top-right-radius: 50% 50%; border-bottom-left-radius: 80% 90%; border-bottom-right-radius: 50% 50%; }
	72% {	transform: skew(1deg, -3deg);				border-top-left-radius: 80% 80%; border-top-right-radius: 90% 80%; border-bottom-left-radius: 90% 90%; border-bottom-right-radius: 80% 50%; }
	77.5% {	transform: skew(5deg, -4deg) scale(1.05);	border-top-left-radius: 50% 80%; border-top-right-radius: 80% 70%; border-bottom-left-radius: 50% 80%; border-bottom-right-radius: 40% 70%; }
	84% {	transform: skew(3deg, -1deg) scale(1.05);	border-top-left-radius: 60% 60%; border-top-right-radius: 70% 70%; border-bottom-left-radius: 50% 90%; border-bottom-right-radius: 60% 90%; }
	96% {	transform: skew(-4deg, 5deg);				border-top-left-radius: 50% 80%; border-top-right-radius: 70% 40%; border-bottom-left-radius: 70% 80%; border-bottom-right-radius: 90% 80%; }
	100% {	transform: none;							border-top-left-radius: 40% 50%; border-top-right-radius: 40% 50%; border-bottom-left-radius: 70% 50%; border-bottom-right-radius: 70% 70%; }}

.loadingdots { display: inline-block; position: relative; font-weight: bold;
	&:before { position: absolute; width: 100%; height: 100%; content: "";
		background: linear-gradient(to left, rgba(242, 232, 99,0) 0%, rgba(242, 232, 99,1) 50%, rgba(242, 232, 99,0) 100%); background-size: 200% 200%; animation: 5s infinite linear swload; }}
@keyframes swload { 0% { background-position-x: 100%; } 100% { background-position-x: -100%; }}

.splash { /* credit for background to heropatterns.com */
	visibility: hidden; max-width: 600px; padding: 1em 3em; border: 5px solid #fff; border-radius: 5px; z-index: 1; position: relative; max-height: 100%; overflow-y: auto; background-color: #e6dccc; box-shadow: -12px 12px 5px rgba(0,0,0,0.2);
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='%23fff3e5' fill-opacity='0.31'><path fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/></g></svg>"); }
.welcomeText { line-height: 1.7em; text-shadow: -1px 1px 0 #fff; font-weight: bold; } .splashOptions { display: flex; flex-direction: column; gap: 1em; margin-top: 1em; }
.optRow { display: flex; gap: 1em; margin-bottom: 5px; }
.splashVersion { position: absolute; top: 3px; right: 5px; font-size: small; color: #aaa; font-style: italic; } .optRow label { cursor: pointer; }
.splashCopyright { font-size: 0.6em; color: #aaa; font-style: italic; text-align: center; } .legalNotice { font-size: 0.6em; color: #666; padding: 1em 0; }
.launchpad { padding: 2em 0; &>button { width: 100%; padding: 1.5em; font-weight: bold; box-shadow: 0 0 0 rgba(0,0,0,0.5); transition: box-shadow 500ms; border: 2px solid #eb91d1;
	&:hover{ background-color: white; box-shadow: -2px 2px 0 purple; } } }
.splashLogo>canvas { width: 100%; margin-bottom: 1em; }

[aria-role="tooltip"] { background: #e298ca; border: 3px solid #CB429F; border-radius: 4px; padding: 0.5em 1em; color: #fff; font-size: 0.7em; letter-spacing: 1px; }
#game>div { position: absolute; height: 100%; width: 100%; user-select: none; display: flex; justify-content: center; align-items: center; visibility:hidden; }
#menu button, .cgbtn button, .buildCmds button, .officeCmds button, .townInfo button, app-menu::part(label), .milestone button { 
	width: 100%; cursor: pointer; color: #fff; font-weight: bold; text-shadow: -1px 1px rgba(0,0,0,0.2);
	background-image: radial-gradient(ellipse at top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 60%), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='222' height='30' viewBox='0 0 222 30'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='3' stitchTiles='stitch' /><feColorMatrix values='0 0 0 9 -4 0 0 0 9 -4 0 0 0 9 -4 0 0 0 0 0.04' /></filter><rect width='100%' height='100%' filter='url(%23n)' fill='%23000000' /></svg>"), linear-gradient(135deg, #fd6db3 0%, #ffc7ef 100%);
	background-size: auto auto, auto auto, 200% auto; transition: 0.3s; letter-spacing: 1px; box-shadow: 0 8px 6px -6px rgba(0,0,0,0.3);
	&:hover{ background-position: right center; border-color: #fd6db3; text-shadow: -1px 1px rgba(0,0,0,0.4); } &:active { filter: brightness(0.9); }}
app-menu::part(label):hover{ background-position: right center; border-color: #fd6db3; text-shadow: -1px 1px rgba(0,0,0,0.4); }
app-menu::part(label):active{ filter: brightness(0.9); }

#menu.ig { background:rgba(252,176,179,0.3); backdrop-filter: blur(2px); padding: 3em; text-align: center; }
#menu:not(.ig) { filter: saturate(1.2); background-image: url('img/world2.jpg'); background-size: auto 100%; background-repeat: repeat-x;
	--bgw: calc(2.66666 * 100vh); background-size: var(--bgw) 100%; animation: infScrollBG 115s linear infinite; }
@keyframes infScrollBG { from { background-position: 0 0; } to { background-position: calc(-1 * var(--bgw)) 0; } }
.igMenuStripe { position: relative; width: 100%; max-width: 300px; height: 100%; margin: auto; border-radius: 12px; background-color: #e6dccc;
	box-shadow: -12px 12px 5px rgba(0,0,0,0.2); padding: 1em 3em; border: 5px solid #fff; display: flex; flex-direction: column; gap: 1em; justify-content: center;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='%23fff3e5' fill-opacity='0.31'><path fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/></g></svg>"); }
.mmbh { filter: hue-rotate(280deg); &:active { filter: hue-rotate(280deg) brightness(0.9) !important; } }
.mmlogo { position: absolute; top: 5%; right: 10%; width: 500px; height: 101px; z-index:2; }
.mmmain { position: absolute; left: 10%; width: 100%; max-width: 275px; padding: 1em 1.5em; border: 3px solid #eb91d1; background: #fff; border-radius: 5px;
	max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5em; z-index:3; }
.mmsub { position: absolute; left: calc(10% + 285px); padding: 1em 1.5em; z-index:5; border: 3px solid #eb91d1; background: #fff; visibility: hidden;
	border-radius: 5px; width: 100%; max-width: 275px; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5em; }
.mmadv { position:absolute;bottom:-10px;right:20%;white-space:nowrap; &>img{ max-height:325px;margin-right:-30px; }
	&>:nth-child(1){ position: relative; left: 25px; z-index:1; }
	&>:nth-child(2){ z-index: 1; position: relative; }
	&>:nth-child(3){ transform: scaleX(-1); } }
.mmglow1,.mmglow2 { position:absolute;width:100%;height:100%;background-image: radial-gradient(circle farthest-side at var(--gposx) var(--gposy),
	rgba(99,102,241,0.15) 0%, rgba(168,85,247,0.1) 30%, rgba(15,23,42,0) 60%); animation: glow1 40s ease-in-out infinite; &.mmglow2{ animation-name: glow2; animation-duration: 30s; } }
@keyframes glow1 { 0% { --gposx: 60%; --gposy: 80%; } 25% { --gposx: 90%; --gposy: 20%; } 50% { --gposx: 40%; --gposy: 10%; }
	75% { --gposx: 20%; --gposy: 60%; } 100% { --gposx: 60%; --gposy: 80%; }}
@keyframes glow2 { 0% { --gposx: 20%; --gposy: 60%; } 25% { --gposx: 50%; --gposy: 50%; } 50% { --gposx: 70%; --gposy: 90%; }
	75% { --gposx: 50%; --gposy: 20%; } 100% { --gposx: 20%; --gposy: 60%; }}

.gslbl { width: 200px;display:inline-block;position:relative;top:0.5em; }
.settingsList { width: 398px; accent-color: #CB429F; & input { max-width: 160px; }} .setbtm,.cgbtn { margin: 12px 3em; text-align: center;user-select:none;  } .optLong { width: 157px; user-select: none; }
.creditsOuter { width: 500px; height:375px; overflow: hidden; background-color: #DFDBE5; position: relative;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); }
.creditsInner { position: absolute; animation: 40s linear infinite normal credits; width: 100%;
	white-space: pre; user-select: none; text-align:center; color: #690375; letter-spacing: 1px; font-size: 0.8em; line-height: 3em; }
@keyframes credits{ from{ transform: translateY(375px); } to{ transform: translateY(-100%); } }

[data-uitype="titlebar"] { padding: 7px 7px 4px 7px; background: linear-gradient(to left, #ffc0cb, #fd6db3); }
[data-uitype="titlebartitle"] { color: #fff; text-shadow: -1px 1px 0 rgba(0,0,0,0.5); font-weight:bold; }
[data-uitype="titlebaricon"]>svg { width: 17px; margin-right: 0.5em; }
[data-uitype="titlebarclose"] { padding: 2px 6px 0 6px; &:not(:hover){ color: #666; }}
[data-uitype="notification"] { padding: 10px 50px 10px 10px; }

@media screen and (max-width: 768px) { .mmlogo { width: 80%; &>canvas{ width:100%;height:auto; } }
	.mmmain,.mmsub{ left: auto; } .mmmain{ margin-top: -150px; } .mmsub{ margin-top: 150px; }}

#town>canvas, #office>canvas { width:100%;height:100%; }
#gui { pointer-events:none; &>*{ pointer-events: auto; } }
.buildCmds { position:absolute;right:0;display:flex;flex-direction:column;gap:5px;margin-top:-10%; & button{ border-radius:12px;border-top-right-radius:0;border-bottom-right-radius:0; } }
.officeCmds { position:absolute;right:0;display:flex;flex-direction:column;gap:5px;visibility:hidden; & button{ border-radius:12px;border-top-right-radius:0;border-bottom-right-radius:0; } }
app-menu::part(label){ border-radius:12px;border-top-right-radius:0;border-bottom-right-radius:0; }
app-menu::part(menuitems){ background:transparent;border:none;margin-left:75px;margin-top:-50px;gap:3px; }

.scitTitle { text-align: center; font-weight: bold; padding: 12px; letter-spacing: 1px; }
.scitSubtitle { text-align: center; padding: 0 10px 15px 10px; color: #aaa; }
.scitList { display: flex; gap: 15px; width: 500px; overflow-x: auto; min-height: 200px; padding: 3px; }
.scitCard { height: 240px; width: 170px; padding: 7px 13px; border: 1px solid silver;border-radius:5px;background-color:#ffc0cb;flex-shrink:0;user-select:none;cursor:pointer;
	&:hover { outline: 2px solid #cb429f; background-color: #ffebee; }}
.scitName { font-weight: bold; text-align:center; }
.scitImg { width:64px;height:64px;background-color: #dfdbe5;margin: 0 auto 20px auto;border-radius:4px;box-shadow:0 8px 6px -6px rgba(0,0,0,0.3);overflow: hidden;pointer-events: none; }
.scitGoals { font-size:0.8em;color:#555; & li+li{ margin-top: 5px; } }
.noimmsmsg { text-align: center; flex-grow: 1; }

.citizenInfo { padding:10px;display:flex; }
.citizenStats { flex-grow:1;padding-left:10px; }
.csGoals { font-size:0.8em;color:#555;margin:0;position:relative;top:-15px;padding:0 20px; }

.townInfo { position:absolute;left:0;bottom:0;background:pink;padding:20px;border-top-right-radius:20px;border-top:1px solid #ffd2e4; }
.scrollDisp { border: 1px solid rgba(255,0,0,0.3);background-color:rgba(255,255,255,0.2);position:absolute; }
.minimap { position:relative;height:84px;clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%); }
.townName { position: absolute; transform: rotate(25deg); margin-top: -29px; font-size: 0.6em; color:#666; }
.townPop { position: absolute; transform: rotate(-25deg); margin-top: -25px; font-size: 0.6em; margin-left: 120px; color:#666; }
.officeSwitch { position: absolute; top:0; right: 0; border-radius: 1em; width: auto !important; transform: scale(0.75); }
.gamemenuBtn { position: absolute; top:0; left: 0; border-radius: 1em; width: auto !important; transform: scale(0.75); }

.buildInfo { display:flex;width:500px;gap:10px;padding:7px; } .buildStatus { flex:1; } .buildGraphic>img { max-width:none; } .buildGraphic { overflow: hidden; }

.advFrame { display:flex;width:780px;gap:3px;background: url("img/ceil.png"); }
.adMsgBox { width:400px; padding: 1em 2em; line-height: 1.5em; & span { display: inline-block;position:relative; animation: advMA 40ms ease-out 0s 1 forwards; } & button { display: block; width: 100%; margin:10px; } }
.adMsgAdv { align-self: flex-end; margin-bottom: 20px; margin-right: 20px; }
.advisorImg { border: 2px solid #d1c0d4; border-radius: 10px; background-color: rgba(130,160,125,0.25); height: 395px; overflow: hidden; margin: 1px 5px; }
@keyframes advMA{ from{ opacity: 0; transform: translateX(-100%); } to{ opacity: 1; transform: translateX(0); } }

.milestone { width:500px;position:relative;background-color:rebeccapurple;letter-spacing:1px;color:white;padding:10px 30px;border:5px solid white;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.9);text-align:center;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='222' height='30' viewBox='0 0 222 30'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='3' stitchTiles='stitch' /><feColorMatrix values='0 0 0 9 -4 0 0 0 9 -4 0 0 0 9 -4 0 0 0 0 0.04' /></filter><rect width='100%' height='100%' filter='url(%23n)' fill='%23690375' /></svg>"); z-index:1; }
.msTitle { font-weight: bold; margin: 1em; font-size: larger; } .msMsg { margin-bottom: 1em; font-size: smaller; line-height: 1.5em; } .msCnt { margin-bottom:1em; }
.milestone:before { content: "🏆"; position: absolute; font-size: xx-large; background: #fff; padding: 0 1em; animation: 30s infinite alternate bubble; margin-left: -1.5em; margin-top: -40px; }
.msSunburst { position:absolute;top:50%;left:50%; }
.msSunburst:before, .msSunburst:after { content: ''; position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; pointer-events: none; transform-origin: center center; }
.msSunburst:before { z-index: 0; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 35%, transparent 70% );
	clip-path: polygon( 50% 50%, 120% 50%, 117.6% 68.1%, 50% 50%, 110.6% 85%, 99.5% 99.5%, 50% 50%, 85% 110.6%, 68.1% 117.6%, 50% 50%, 50% 120%, 31.9% 117.6%,
		50% 50%, 15% 110.6%, 0.5% 99.5%, 50% 50%, -10.6% 85%, -17.6% 68.1%, 50% 50%, -20% 50%, -17.6% 31.9%, 50% 50%, -10.6% 15%, 0.5% 0.5%, 50% 50%, 15% -10.6%, 31.9% -17.6%, 50% 50%, 50% -20%, 68.1% -17.6%,
		50% 50%, 85% -10.6%, 99.5% 0.5%, 50% 50%, 110.6% 15%, 117.6% 31.9% ); animation: spin-cw 12s linear infinite; }
.msSunburst::after { z-index: 0; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.5) 40%, transparent 70% );
	clip-path: polygon( 50% 50%, 120% 50%, 110.6% 85%, 50% 50%, 85% 110.6%, 50% 120%, 50% 50%, 15% 110.6%, -10.6% 85%, 50% 50%, -20% 50%, -10.6% 15%, 50% 50%, 15% -10.6%, 50% -20%, 50% 50%, 85% -10.6%, 110.6% 15% );
	animation: spin-ccw 18s linear infinite; }
@keyframes spin-cw { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spin-ccw { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(-360deg); } }

.mmail { width: 500px; height: calc(350px + 2.5em); margin-top: 5px; &>div { overflow-y:auto;max-height:350px; display: flex; flex-direction: column; gap: 6px; }}
.mmsgs>details { padding: 4px 1.5em; border-radius: 5px; }
.mletter { padding: 1em 2em; margin-top: 1em; color: #666; line-height: 2em; letter-spacing: 1px; background: rgba(255, 255, 255, 0.5); border-radius: 5px; }
.mmsgs summary{ padding-top: 7px; user-select: none; } [name="mayoralmail"]:not(.unread) summary{ font-weight: normal; }
.mmsgs summary>button { float: right; transform: scale(0.75); margin-top: -7px; &:hover{ background: pink; } }
.stamp { float:right; border: 5px solid white; height: 42px; box-shadow: 0 0 3px black; margin: 5px; cursor: pointer; &.collected { filter: grayscale(1) contrast(0.2) brightness(2); } }
.stampImage { border: 5px double white; height: 42px; box-shadow: 0 0 3px black; position: relative; display: inline-block; overflow: hidden; }
.stampEntry { display: flex; gap: 1em; background-color: #eee; font-size: x-small; padding: 1em; border-radius: 10px; }
.stampMint:after, .stampWow:after { content:"";position:absolute;top:-50%;left:-75%;width:50%;height:200%;
	background: linear-gradient(to right,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.4) 50%,rgba(255, 255, 255, 0) 100%);
	transform:rotate(25deg);pointer-events: none;animation:stamp-rare 4s ease-in-out infinite; }
.stampFancy:after { content:"";position:absolute;top:-50%;left:-75%;width:50%;height:200%;
	background: linear-gradient(to right,rgba(255, 255, 255, 0) 0%,rgba(255, 128, 128, 0.4) 45%,rgba(128, 255, 128, 0.4) 50%,rgba(128, 128, 255, 0.4) 55%,rgba(255, 255, 255, 0) 100%);
	transform:rotate(25deg);pointer-events: none;animation:stamp-rare 4s ease-in-out infinite; }
.stampFancy { border: 2px solid darkblue; box-shadow: 0 0 0 3px gold; border-radius: 1px; height: 35px; }

.stampWow { border: 5px solid transparent; background: linear-gradient(#eb91d1, #cb429f) padding-box, conic-gradient(from var(--angle), #6184D8, #F0F465, #9CEC5B, #fd6db3, #6184D8) border-box;
	animation: spin-ultra 3s linear infinite; }
@keyframes stamp-rare { 0% { left: -75%; } 20% { left: 125%; } 100% { left: 125%; } } @keyframes spin-ultra { to { --angle: 360deg; } }
.deco { width: 600px; height: 300px; overflow: auto; }
.decoList label { border:3px solid transparent;border-radius:5px;overflow:hidden;display: inline-block;height: 128px; }
.decoList input[type="radio"] { position:absolute;visibility:hidden; &:checked+label{ border:3px solid yellow; } }
.posterpreview { width: 80px; height: 100px; margin: 8px; border-radius: 5px; overflow: hidden; &:hover{ outline: 2px solid yellow; } }
.posterentry { display: flex; } .rmposter { position: absolute; right: 0; transform: scale(0.7); margin-top: -3px; }
.posteroptgrp { padding: 10px; } .posteropt { display: flex; &>label{ height: auto; width: 30%; } &>input { flex: 1; } }
.posterselection { display:grid; grid-template-columns:repeat(4, 1fr); } .posterlist { position: relative; }