html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	list-style: none;
}

@font-face {
	font-family: 'Londrina Solid';
	src: url('../fonts/LondrinaSolid-Black.ttf') format('truetype');
	font-weight: 900; /* Black weight */
	font-style: normal;
}

@font-face {
	font-family: 'Londrina Solid';
	src: url('../fonts/LondrinaSolid-Light.ttf') format('truetype');
	font-weight: 300; /* Light weight */
	font-style: normal;
}

@font-face {
	font-family: 'Londrina Solid';
	src: url('../fonts/LondrinaSolid-Regular.ttf') format('truetype');
	font-weight: 400; /* Regular weight */
	font-style: normal;
}

@font-face {
	font-family: 'Londrina Solid';
	src: url('../fonts/LondrinaSolid-Thin.ttf') format('truetype');
	font-weight: 100; /* Thin weight */
	font-style: normal;
}

@font-face {
	font-family: 'Hubballi';
	src: url('../fonts/Hubballi-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


:root {
	--game-font-size-normal: 20px;
	--game-font-size-large: 23px;
	--game-font-size-small: 15px;
	--game-font-lineheight-normal: 22px;
	--game-font-weight-normal: 300;
	--game-font-01: 'Londrina Solid', sans-serif;
	--game-font-02: 'Londrina Solid', sans-serif;
	--game-font-size-button: 16px;
	--game-font-sans: sans-serif;
	--game-color-white: #fff;
	--game-color-black: #000;
	--game-color-darkgreen: #002e05;
	--game-color-midgreen: #6da30e;
	--game-color-midgrey: #8e8688;
	--game-color-lightgrey: #cbdbd3;
	--game-color-lightgrey-opaque80: rgba(203,219,211,0.8);
	--game-color-darkgrey: #151e31;
	--game-color-skyblue: #07599a;
	--game-color-lightyellow: #faf678;
	--game-color-orange: #ffc401;
	--game-color-greenopaque: rgba(0,0,0,0.5);
	--game-color-brown: #f29a2e;
	--game-color-brownopaque: rgba(242,154,46,0.8);
	--game-color-red: #cd0007;
	--game-color-darkbrown: #482007;
	--game-color-green01: #add425;
	--game-color-green01-opaque80: rgba(173,212,37,0.8);
	--game-color-browngrad: linear-gradient(15deg, rgba(126,72,22,1) 0%, rgba(145,90,27,1) 100%, rgba(175,94,24,1) 100%);
	--game-color-greygrad: linear-gradient(202deg, rgba(238,236,236,1) 0%, rgba(222,220,226,1) 100%);
	--game-popup-max-width: 400px;
	--game-max-width: 600px;
	--game-max-height: 600px;
	--game-bg-01: url(../img/bg.jpg) center no-repeat;
	--game-bg-chequer: url(../img/bg-chequer.png);

	/* Moves */
	--tile-00-img: url(../img/00.svg) center no-repeat;

	/* Wood */
	--tile-01-img: url(../img/01.svg) center no-repeat;
	--tile-02-img: url(../img/02.svg) center no-repeat;
	--tile-02-img-berries: url(../img/02plus.svg) center no-repeat;
	--tile-03-img: url(../img/03.svg) center no-repeat;
	--tile-03-img-berries: url(../img/03plus.svg) center no-repeat;
	--tile-04-img: url(../img/04.svg) center no-repeat;
	--tile-04-img-berries: url(../img/04plus.svg) center no-repeat;
	--tile-05-img: url(../img/05.svg) center no-repeat;
	--tile-05-img-berries: url(../img/05plus.svg) center no-repeat;
	--tile-06-img: url(../img/06.svg) center no-repeat;
	--tile-06-img-berries: url(../img/06plus.svg) center no-repeat;
	--tile-07-img: url(../img/07.svg) center no-repeat;
	--tile-07-img-berries: url(../img/07plus.svg) center no-repeat;
	--tile-08-img: url(../img/08.svg) center no-repeat;
	--tile-08-img-berries: url(../img/08plus.svg) center no-repeat;
	--tile-09-img: url(../img/09.svg) center no-repeat;
	--tile-09-img-berries: url(../img/09plus.svg) center no-repeat;
	--tile-10-img: url(../img/10.svg) center no-repeat;
	--tile-10-img-berries: url(../img/10.svg) center no-repeat;
	--tile-10-shadow: url(../img/10-shadow.svg) center no-repeat;
	--tile-10-img-berries: url(../img/10plus.svg) center no-repeat;
	/* Stone */
	--tile-01a-img: url(../img/01a.svg) center no-repeat;
	--tile-02a-img: url(../img/02a.svg) center no-repeat;
	--tile-02a-img-berries: url(../img/02aplus.svg) center no-repeat;
	--tile-03a-img: url(../img/03a.svg) center no-repeat;
	--tile-03a-img-berries: url(../img/03aplus.svg) center no-repeat;
	--tile-04a-img: url(../img/04a.svg) center no-repeat;
	--tile-04a-img-berries: url(../img/04aplus.svg) center no-repeat;
	--tile-05a-img: url(../img/05a.svg) center no-repeat;
	--tile-05a-img-berries: url(../img/05aplus.svg) center no-repeat;
	--tile-06a-img: url(../img/06a.svg) center no-repeat;
	--tile-06a-img-berries: url(../img/06aplus.svg) center no-repeat;
	--tile-07a-img: url(../img/07a.svg) center no-repeat;
	--tile-07a-img-berries: url(../img/07aplus.svg) center no-repeat;
	--tile-08a-img: url(../img/08a.svg) center no-repeat;
	--tile-08a-img-berries: url(../img/08aplus.svg) center no-repeat;
	--tile-09a-img: url(../img/09a.svg) center no-repeat;
	--tile-09a-img-berries: url(../img/09aplus.svg) center no-repeat;
	--tile-10a-img: url(../img/10a.svg) center no-repeat;
	--tile-10a-img-berries: url(../img/10a.svg) center no-repeat;
	--tile-10a-shadow: url(../img/10a-shadow.svg) center no-repeat;
	--tile-55-img: url(../img/55.svg) center no-repeat; /* Fox */
	--tile-55-img-santa: url(../img/55-santa.svg) center no-repeat; /* Fox */
	--tile-56-img: url(../img/56.svg) center no-repeat; /* Fox Coins */

	--tile-dead01-img: url(../img/40.svg) center no-repeat;
	--tile-ruins01-img: url(../img/40a.svg) center no-repeat;
	--tile-dead02-img: url(../img/41.svg) center no-repeat;
	--tile-ruins02-img: url(../img/41a.svg) center no-repeat;
	--tile-dead03-img: url(../img/42.svg) center no-repeat;
	--tile-ruins03-img: url(../img/42a.svg) center no-repeat;
	--tile-diamond-img: url(../img/70.svg) center no-repeat;
	--tile-diamondoption-img: url(../img/70option.svg) center no-repeat;
	--tile-diamondoption-grass-img: url(../img/70option-grass.svg) center no-repeat;
	--tile-diamondoption-stone-img: url(../img/70option-stone.svg) center no-repeat;
	--tile-diamond02-img: url(../img/71.svg) center no-repeat;
	--tile-diamond03-img: url(../img/72.svg) center no-repeat;
	--tile-delete-img: url(../img/99.svg) center no-repeat;
	--tile-relocator-img: url(../img/97.svg) center no-repeat;
	--tile-undo-img: url(../img/100.svg) center no-repeat;
	--tile-coins-img: url(../img/coins.svg) center no-repeat;
	--tile-score-img: url(../img/score.svg) center no-repeat;

	--tile-lake-01: url(../img/map-bg-centrallake-v2.svg) center no-repeat;
	--tile-windingriver-01: url(../img/map-bg-windingriver-v5.svg) center no-repeat;
	--tile-tropicalisland-01: url(../img/map-bg-tropicalisland-v4.svg) center no-repeat;
	--tile-thefort-01: url(../img/map-bg-thefort-v3.svg) center no-repeat;
	--tile-crumblingcamelot-01: url(../img/map-bg-crumblingcamelot-v3.svg) center no-repeat;
	--tile-mountaintop-01: url(../img/map-bg-mountaintop.svg) center no-repeat;

	--map-dots-grasslands: url(../img/map-dots-grasslands.svg) center no-repeat;
	--map-dots-tropicalisland: url(../img/map-dots-tropicalisland.svg) center no-repeat;
	--map-dots-centrallake: url(../img/map-dots-centrallake.svg) center no-repeat;
	--map-dots-windingriver: url(../img/map-dots-windingriver.svg) center no-repeat;
	--map-dots-thefort: url(../img/map-dots-thefort.svg) center no-repeat;
	--map-dots-mountaintop: url(../img/map-dots-mountaintop.svg) center no-repeat;
	--map-dots-peacefulprairie: url(../img/map-dots-peacefulprairie.svg) center no-repeat;
	--map-dots-crumblingcamelot: url(../img/map-dots-crumblingcamelot.svg) center no-repeat;
	--map-dots-lavaflow: url(../img/map-dots-lavaflow.svg) center no-repeat;
}

html{overflow-x: hidden; width: 100%;}
body{margin: 0; padding: 0; width: 100%; overflow-x: hidden; background: var(--game-color-darkgreen); color: #fff; font-size: var(--game-font-size-normal); font-weight: var(--game-font-weight-normal); line-height: var(--game-font-lineheight-normal); font-family: var(--game-font-01); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none;}

h1{display: block; width: 100%; font-family: var(--game-font-01); font-size: 40px; padding-bottom: 15px; margin-bottom: 0px; line-height: normal; font-weight: bold;}
h2{display: block; width: 100%; font-family: var(--game-font-01); font-size: 32px; color: var(--game-color-brown); padding-bottom: 10px; margin-bottom: 0px; line-height: normal;}
h2 .num{color: rgba(255,255,255,0.4);}

hr{background: rgba(255,255,255,0.2); margin: 30px auto; padding: 0; width: 100%; height: 1px; overflow: hidden; border: none;}

a{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; text-decoration: none; color: var(--game-color-orange);}
p{margin: 0; padding: 10px 0;}
span{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none;}

input.input-grey{background: #ddd !important;}
input{-webkit-appearance: none; outline: none;}
label{display: block; margin: 10px auto;}
input[type="text"],
	input[type="password"],
	input[type="email"]{width: 100%; max-width: 100%; padding: 14px 20px !important; border-radius: 6px; background: #fff; border: none; color: var(--game-color-darkbrown); margin: 0 0 10px 0 !important; line-height: normal; box-sizing: border-box; font-size: var(--game-font-size-normal); font-weight: var(--game-font-weight-normal); font-family: var(--game-font-01);}
input[type="submit"],
	input[type="button"],
	button,
	.btn-box{display: inline-block; width: auto; line-height: normal; padding: 9px 20px; color: var(--game-color-darkbrown); -webkit-appearance: none; border: none; box-shadow: 0px 6px 6px -2px rgba(0,0,0,0.1), inset 0px -5px 9px -5px rgba(47,20,3,0.1); background: linear-gradient(0deg, var(--game-color-brown) 0%, var(--game-color-orange) 100%); font-family: var(--game-font-sans); font-size: var(--game-font-size-button); font-weight: bold; border-radius: 6px; margin: 0px;}
.btn-box:hover{background: linear-gradient(0deg, var(--game-color-orange) 0%, var(--game-color-brown) 100%);}
.btn-sign{display: block; width: 100%; text-align: center; position: relative; border: 4px solid black; font-family: var(--game-font-01); font-size: 30px; padding: 15px 20px; margin-bottom: 6px; line-height: normal; font-weight: normal; letter-spacing: 1px; color: #fff; border-radius: 14px; background: var(--game-color-browngrad);  text-shadow: 0px -2px 0px #300F10; transition: none; overflow: hidden;}
.btn-sign::after{display: block; content: ''; width: 100%; height: 3px; position: absolute; top: 0; left: 0; right: 0; background: var(--game-color-brown);}
#btn-deleteaccount{background: var(--game-color-red); color: #fff;}
#btn-keepaccount{color: var(--game-color-darkgreen); background: var(--game-color-green01);}

/* WP 'Remember Me' Checkbox */
label[for="rememberme"] {position: relative; padding-left: 30px; cursor: pointer; display: flex; align-items: center;}
input[type="checkbox"]#rememberme {background: #fff; border-radius: 50%; width: 18px; height: 18px; border: 3px solid #fff; box-sizing: border-box;}
label[for="rememberme"].checked #rememberme { background: var(--game-color-orange);}

img{display: block; max-width: 100%; margin: 0; padding: 0;}
.text-left{text-align: left;}

#app{display: block; width: 100vw; min-height: 100vh; display: relative; box-sizing: border-box;}

#loader{display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; background: var(--game-color-darkgreen); position: fixed; top: 0%; left: 0%; z-index: 990; pointer-events: none; opacity: 0;}
#loader svg{display: block; width: 60px; height: 60px; animation: animLoader 1s linear 0s infinite; transition: all 1s ease-out 0s; }
#loader.loading{opacity: 1;}
.loader-mini{display: none; width: 30px; height: 30px; transition: all 1s ease-out 0s; margin-left: 20px;}
.loader-mini.active{display: block; animation: animLoader 1s linear 0s infinite;}

/* User Registration */
.container-clients-login{display: flex; justify-content: space-between; align-items: flex-start; box-sizing: border-box; padding: 0 10px;}
.btn-clients-login{width: 50%; text-align: center; opacity: 0.4; color: #fff; padding: 10px 0 15px 0; border-bottom: 1px solid transparent; box-sizing: border-box; margin: 0 !important;}
.btn-clients-login.active{opacity: 1; border-bottom: 1px solid #fff;}
.login-container{display: none; text-align: left;}
.login-container.active{display: block; width: 100%; background: rgba(255,255,255,0.05); padding: 30px 30px 40px 30px; box-sizing: border-box; width: 100%;}
#login-message{display: none; position: absolute; top: 0%; left: 50%; transform: translate(-50%, -110%); z-index: 9; color: var(--game-color-red); text-align: left;}
#login-message .illustration-svg{display: block; max-width: 100%; margin: 0 0 15px 0;}
#login-message-inner{display: block; width: 250px; min-height: 200px; text-align: center; height: auto; box-sizing: border-box; border-radius: 20px; padding: 20px; background: #fff; position: relative;}
#login-message-inner::before{display: block; width: 20px; height: 20px; content: ' '; transform: rotate(45deg) translate(-10%, 64%); z-index: 0; background: #fff; transform-origin: center; position: absolute; bottom: 0; left: 50%; top: auto; right: auto;}
#login-message a{color: var(--game-color-red); text-decoration: underline;}
#login-message.active{display: block;}
#login-message.success{color: var(--game-color-midgreen);}
#message-accountdeleted{display: none; color: var(--game-color-midgreen);}
#message-accountdeleted.active{display: block;}
#wrapper .ur-form-grid{padding: 0 !important;}
#wrapper  .ur-frontend-form{border: 0; padding: 0;}
#wrapper  .ur-field-item{}
#wrapper .ur-label{font-size: inherit !important; font-weight: 300 !important; }
#wrapper .ur-frontend-field{background: none; border: 1px solid #fff; color: #fff; border-radius: 30px;}
#wrapper .ur-frontend-form .ur-button-container {padding: 0; align-items: flex-start;}
#wrapper .ur-frontend-form .ur-submit-button {margin-right: 0px; padding: 10px 20px; border-radius: 30px; overflow: hidden; border: none; background: #fff; color: var(--game-color-black); -webkit-appearance: none;  font-size: var(--game-font-size-normal); font-weight: var(--game-font-weight-normal); font-family: var(--game-font-01);}
#wrapper .ur-frontend-form .ur-button-container .ur-submit-button {margin: 10px 0 0 0;}
#wrapper .user-registration-password-strength{border-radius: 30px; color: rgba(0,0,0,0.7);}
#wrapper .user-registration-password-strength.short{}
#wrapper .user-registration-password-strength.bad{}
#wrapper .user-registration-password-strength.good{}
#wrapper .user-registration-password-strength.strong{}
#wrapper .user-registration-password-hint{display: none;}
#wrapper .ur-frontend-form .required {color: #ff9fa2;}
#wrapper .user-registration-error {border-top-color: #ff9fa2; border-top: 1px solid; background: rgba(0,0,0,0.3); color: #ff9fa2;}
#wrapper .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item {margin-bottom: 0px;}
#home-login-panels{display: block; width: 100%; overflow: hidden; margin-top: 20px; text-align: left;}
#home-login-panels label{margin: 0; padding: 0;}
#home-login-panels .form-container{display: block; width: 100%; padding: 0 10px; box-sizing: border-box;}
#home-login-panels-container{display: block; width: 100%; margin: 0; position: relative; min-height: 190px; overflow: hidden;}
#home-login-panels.panel-signup #home-login-panels-inner{transform: translateX(0%);}
#home-login-panels.panel-signin #home-login-panels-inner{transform: translateX(-25%);}
#home-login-panels.panel-passwordreset #home-login-panels-inner{transform: translateX(-50%);}
#home-login-panels-inner{display: flex; flex-direction: row; width: 400%; align-items: flex-start; justify-content: flex-start; transition: transform 0.2s ease-in-out; position: absolute; top: 0; left: 0;}
#home-login-panels-inner .home-login-panel{display: block; width: 25%; box-sizing: border-box; padding: 0;}
#home-login-panels-inner .col-container{padding: 5px 0 20px 0; box-sizing: border-box; font-size: var(--game-font-size-small);}
#home-panel{display: block; padding: 0 30px; box-sizing: border-box; width: 100%;}
#home-panel #daily-container{display: block; width: 100%;}
#home-panel #nickname-container{display: flex; width: 100%; align-items: flex-start; justify-content: space-between; display: none;}
#home-panel .nickname-current{text-overflow: ellipsis; max-width: 100%; display: block; overflow: hidden;}
#home-panel #daily-moves-user {display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; margin: 18px auto;}
#home-panel #daily-moves-user #daily-moves-counter{display: block;}
#home-panel #daily-moves-user #daily-moves-unlimitedmoves{display: none;}
#home-panel #daily-moves-user.purchased #daily-moves-counter{display: none;}
#home-panel #daily-moves-user.purchased #daily-moves-reset{display: none;}
#home-panel #daily-moves-user.purchased #daily-moves-unlimitedmoves{display: block;}
#home-panel #daily-moves-upsell{display: block; font-size: 16px; width: 100%; box-sizing: border-box; padding: 8px 15px; color: var(--game-color-green01); position: relative; z-index: 1; border: 1px solid var(--game-color-green01); border-radius: 8px; margin-bottom: 5px;}
#home-panel #daily-moves-upsell b{color: #fff}
#home-panel #daily-moves-upsell::before{content: ' '; background:  var(--game-color-green01); opacity: 0.2; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 0; border-radius: 4px;}
#home-panel #daily-moves-verify{display: flex; font-size: 16px; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 8px 15px; color: var(--game-color-orange); position: relative; z-index: 1; border: 1px solid var(--game-color-orange); border-radius: 8px; margin-bottom: 5px;}
#home-panel #daily-moves-verify a{color: #fff}
#home-panel #daily-moves-verify::before{content: ' '; background: var(--game-color-orange); opacity: 0.15; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 0; border-radius: 4px;}
#home-panel #daily-moves-verify span{position: relative; z-index: 1;}
#home-panel #daily-moves-verify .verify-reload-icon{display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; padding: 0; margin: 0; background: none; border: none; color: inherit; cursor: pointer; position: relative; z-index: 1;}
#home-panel #daily-moves-verify .verify-reload-icon svg{display: block; width: 16px; height: 16px;}
#home-login{width: 100%; min-height: 300px; position: relative;}
#btn-passwordreset{margin: 0;}

#popup-store-main .iap-container h2{font-size: 24px;}

#btn-home-popup-close-tl,
	#sky-menu{display: flex; align-items: center; justify-content: flex-end; flex-direction: column; width: 60px; height: 110px; padding: 12px 0; box-shadow: 0px 19px 84px 0px rgba(0,0,0,0.25); background: linear-gradient(0deg, var(--game-color-brown) 0%, var(--game-color-orange) 100%); box-sizing: border-box; overflow: hidden; transform: translateY(-100%); transition: transform 0.3s cubic-bezier(.34,1.56,.64,1); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; position: fixed; top: 0; right: 18px; z-index: 991;}
#btn-home-popup-close-tl .inner-x,
	#sky-menu .inner-x{display: block; width: 28px; height: 28px; background: url(../img/icon-close-white-01.svg) center no-repeat; transform: rotate(0deg); transition: transform 0.8s cubic-bezier(.34,1.56,.64,1);}
#btn-home-popup-close-tl.active,
	#sky-menu.active{transform: translateY(-20px);}
#btn-home-popup-close-tl.active .inner-x,
	#sky-menu.active .inner-x{transform: translateY(-20px); transform: rotate(90deg); transition: transform 0.6s cubic-bezier(.34,2,.64,1) 0.9s;}

#home .content{width: 100%;}

#home-logo{display: block; position: relative; width: 100%; aspect-ratio: 1/1; padding: 0; margin: 0 auto 5px auto; overflow: visible;}
#home-logo .hero-logo{display: block; width: 100%; z-index: 3; position: absolute; top: 0; left: 0; aspect-ratio: 1/1;}
#home-logo .hero-logo.castleshadow{z-index: 1;}
#home-logo .hero-logo.castle{z-index: 2; animation: skyCastleHero 4s ease-in-out 0s infinite;}
#home-logo .hero-logo.cloud01{animation: animHomeLogoCloud01 62s ease-in-out 0s infinite; z-index: 0;}
#home-logo .hero-logo.cloud02{animation: animHomeLogoCloud02 62s ease-in-out 0s infinite; z-index: 0;}
#home-logo .hero-logo.version{transform: translateY(30px); z-index: 5; animation: animHomeLogoSign 0.65s cubic-bezier(.34,1.56,.64,1) 1.5s forwards; opacity: 0;}
#home-logo .hero-logo.fox{animation: animHomeLogoFox 12s linear 2s infinite; z-index: 4; transform: translate(0,0);}

@-webkit-keyframes animHomeLogoFox{
	0% {transform: translateX(0) translateY(0%);}
	2% {transform: translateX(4.5%) translateY(-2%);}
	4% {transform: translateX(9%) translateY(0%);}
	6% {transform: translateX(13.5%) translateY(-2%);}
	8% {transform: translateX(18%) translateY(0%);}
	50% {transform: translateX(18%) translateY(0%);}
	52% {transform: translateX(13.5%) translateY(-2%);}
	54% {transform: translateX(9%) translateY(0%);}
	56% {transform: translateX(4.5%) translateY(-2%);}
	58% {transform: translateX(0%) translateY(0%);}
	100% {transform: translateX(0) translateY(0%);}
}
@keyframes skyCastleHero {
	0% { transform: translateY(0); }
	50% { transform: translateY(-5%); }
	100% { transform: translateY(0); }
}
@-webkit-keyframes animHomeLogoSign {
	0% {transform: translateY(30px); opacity: 0;}
	100% {transform: translateY(0); opacity: 1}
}
@-webkit-keyframes animHomeLogoCloud01 {
	0% {transform: translateX(0px);}
	50% {transform: translateX(400px);}
	100% {transform: translateX(0px);}
}
@-webkit-keyframes animHomeLogoCloud02 {
	0% {transform: translateX(0px);}
	50% {transform: translateX(-400px);}
	100% {transform: translateX(0px);}
}

#home-welcome{position: fixed; z-index: 999; top: 50vh; left: 50vw; transform: translate(-50%, -50%);}
#home-welcome p{max-width: 100% !important;}
#home-welcome #welcome-panels{display: block; width: 80vw; height: 80vh; margin: 0 auto; background: #fff; color: var(--game-color-darkbrown); text-align: center; border-radius: 20px; padding: 0px; box-sizing: border-box; overflow: hidden;}
#home-welcome .welcome-grid{display: grid; width: 100%; max-width: 100%; aspect-ratio: 1/1; gap: 0px; border-top-left-radius: 20px; border-top-right-radius: 20px; background: var(--game-bg-01); background-size: cover; margin: 0 auto; position: relative; grid-template-columns: repeat(3, calc(100% / 3)); grid-template-rows: repeat(3, calc(100% / 3));}
#home-welcome .welcome-grid::before{content: ' '; display: block; opacity: 0.06; background: var(--game-bg-chequer); /*animation: animChequer 6s linear 0s infinite; */background-size: 28.5%; background-repeat: repeat; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; aspect-ratio: 1 / 1; width: 100%; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; background-size: 66.66%;}
#home-welcome .welcome-grid div{position: relative;}
#home-welcome .welcome-grid div::before{content: ' '; display: block; width: 100%; height: 100%; transform-origin: center; transform: translate(0, 0); position: absolute; bottom: 0; left: 0; width: 100%; height: 150%; z-index: 1; pointer-events: none;}
#home-welcome .welcome-grid div[data-number="1"]::before{background: var(--tile-01-img); background-size: cover;}
#home-welcome .welcome-grid div[data-number="1"][data-type="2"]::before{background: var(--tile-01a-img); background-size: cover;}
#home-welcome .welcome-grid div[data-number="2"]::before{background: var(--tile-02-img); background-size: cover;}
#home-welcome .welcome-grid div[data-number="2"][data-type="2"]::before{background: var(--tile-02a-img); background-size: cover;}
#home-welcome .welcome-grid div[data-number="3"]::before{background: var(--tile-03-img); background-size: cover;}
#home-welcome .welcome-grid div[data-number="3"][data-type="2"]::before{background: var(--tile-03a-img); background-size: cover;}
#home-welcome .welcome-grid div[data-number="4"]::before{background: var(--tile-04-img); background-size: cover;}
#home-welcome .welcome-grid div[data-number="4"][data-type="2"]::before{background: var(--tile-04a-img); background-size: cover;}
#home-welcome .welcome-grid div[data-number="5"]::before{background: var(--tile-05-img); background-size: cover;}
#home-welcome .welcome-grid div[data-number="5"][data-type="2"]::before{background: var(--tile-05a-img); background-size: cover;}
#home-welcome .welcome-grid .latest::before{animation: animLatestIn 0.25s linear 0s forwards;}
#home-welcome .welcome-grid .anim-left::before{animation: welcomeSlideRight 0.25s linear 0s forwards;}
#home-welcome .welcome-grid .anim-right::before{animation: welcomeSlideLeft 0.25s linear 0s forwards;}
#home-welcome .welcome-grid .anim-down::before{animation: welcomeSlideDown 0.25s linear 0s forwards;}
#home-welcome .welcome-grid .anim-up::before{animation: welcomeSlideUp 0.25s linear 0s forwards;}
#home-welcome .welcome-tick{display: block; opacity: 0; background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49.68 35.46'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23ffffff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 7px; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Etripleopolis-micro-icons%3C/title%3E%3Cpolyline class='cls-1' points='3.5 17.73 17.73 31.96 46.19 3.5'/%3E%3C/svg%3E%0A") center no-repeat var(--game-color-green01); background-size: 60%; box-shadow: 0px 8px 18px 1px rgba(0,0,0,0.4); border: 2px solid #fff; box-sizing: border-box; width: 60px; height: 60px; position: absolute !important; top: 0; right: 0; border-radius: 50%; transform: translate(25%, -25%) scale(0.1); overflow: hidden; z-index: 2; transition: all 0.6s cubic-bezier(.34,3,.64,1) 0.3s;}
#home-welcome .welcome-tick.active{transform: translate(25%, -25%) scale(1); opacity: 1;}
#home-welcome .welcome-step{display: flex; align-items: center; opacity: 0; box-shadow: 0px 8px 18px 1px rgba(0,0,0,0.4); justify-content: center; background: linear-gradient(0deg, var(--game-color-brown) 0%, var(--game-color-orange) 100%); border: 2px solid #fff; box-sizing: border-box; width: 30px; line-height: normal; text-align: center; font-weight: bold; color: #fff; height: 30px; position: absolute !important; top: 0; right: 0; border-radius: 50%; transform: translate(45%, -45%); overflow: hidden; z-index: 2; transition: all 0.4s linear 0s;}
#home-welcome .welcome-step.active{opacity: 1;}
#home-welcome .welcome-indicator::after{content: ' '; width: 100%; height: 100%; box-sizing: border-box; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 2px solid var(--game-color-green01); background: transparent; border-radius: 5px; animation: welcomeCell 2s linear 0s infinite; opacity: 0;}
#home-welcome .welcome-option-container{display: block; color: #fff; transform: translateY(-2px); padding: 10px 10px 20px 10px; text-align: center; width: 100%; max-width: 100%; margin: 0 auto; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; margin-bottom: 30px;}
#home-welcome .welcome-option-container .tile-option-col{margin-top: 15px;}
#welcome-panels-inner{display: flex; flex-direction: row; width: 300%; align-items: flex-start; justify-content: flex-start; transition: transform 0.2s ease-in-out; }
#welcome-panels-inner .welcome-panel{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 33.33%; width: 80vw; height: 80vh; overflow: scroll; box-sizing: border-box; padding: 0 30px; position: relative;}
#welcome-panels-inner .welcome-panel p{max-width: 90%;}
#welcome-panels-inner .welcome-panel h1{font-size: 26px; color: var(--game-color-brown); padding-top: 30px;}
#welcome-panels.panel-01 #welcome-panels-inner{transform: translateX(0%);}
#welcome-panels.panel-02 #welcome-panels-inner{transform: translateX(-33.33%);}
#welcome-panels.panel-03 #welcome-panels-inner{transform: translateX(-66.66%);}
#welcome-dots{display: none; width: 100vw; height: 10vh; background: rgba(0,0,0,0.3); position: fixed; bottom: 0; left: 0; align-items: center; justify-content: center;}
#welcome-dots .welcome-dot{display: block; width: 5px; height: 5px; background: blue; border-radius: 50%; overflow: hidden; margin: 0 3px;}
#btn-welcome-complete-container{}
.text-stone{display: inline-block; padding: 2px 6px; border-radius: 6px; overflow: hidden; margin: 0 1px; transform: translateY(-2px); background: var(--game-color-midgrey); color: #fff; vertical-align: middle;}
.text-wood{display: inline-block; padding: 2px 6px; border-radius: 6px; overflow: hidden; margin: 0 1px; transform: translateY(-2px); background: var(--game-color-brown); color: #fff; vertical-align: middle;}

#gamemodes-container .home-continuegame{display: none;}

#popup-orientation{display: none; background: var(--game-color-darkgreen); width: 100vw; height: 100vh; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;}

.store-container{display: none; width: auto; box-sizing: border-box; padding: 0;}
.store-container.active{display: block;}
.store-purchased-message{display: none;}
.store-purchased-message.active{display: block;}
.iap-container{display: flex; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; background: var(--game-color-greygrad); border-radius: 15px; width: 100%; box-sizing: border-box; padding: 20px; margin: 15px 0;}
.iap-container h2{color: var(--game-color-darkbrown);}
.iap-container p{padding-bottom: 15px;}
.iap-container .iap-price{display: none !important;}
.iap-icon{display: block; width: 80px; height: 80px; overflow: hidden;}
.iap-icon .iap-icon-purchased{display: block; width: 80px; height: 80px; background: url(../img/iap-purchased.svg) center no-repeat; background-size: contain !important; }
.iap-icon .iap-icon-not-purchased{display: block; width: 80px; height: 80px; background: url(../img/iap-notpurchased.svg) center no-repeat; background-size: contain !important; }
/*.iap-container.purchased{border: 2px solid green;}*/
.iap-container.purchased .iap-purchased{display: block !important;}
.iap-container-purchased .iap-not-purchased{display: none !important;}
.iap-container.purchased .iap-button{display: none;}
/*.iap-container.not-purchased{border: 2px solid red;} */
.iap-container.not-purchased .iap-not-purchased{display: block !important;}
.iap-container.not-purchased .iap-purchased{display: none !important;}
.iap-container.not-purchased .iap-button{display: block;}
.store-coins-container{display: flex; width: 100%; align-items: center; justify-content: space-between; flex-wrap: wrap; flex-direction: row; box-sizing: border-box;}
.store-coins-container .iap-container{display: block; text-align: left; overflow: hidden;}
#coins-popup-total{display: flex; width: 100%; border-radius: 10px; overflow: hidden; padding: 10px 15px; margin: 0; box-sizing: border-box; justify-content: space-between; align-items: center; transition: all 2s ease-out 0.5s; position: relative;}
#coins-popup-total::before{content: ' '; display: block; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; position: absolute; transition: all 2s ease-out 0.5s; opacity: 0; pointer-events: none;}
#coins-popup-total span{position: relative; z-index: 2;}
/* Coin-credited flash — pure CSS. iap-tk.js adds .coins-credited; the ::before
   sweep runs the coins-purchase-flash animation and fades out on its own.
   Restyle: change the ::before background (flash colour) and the animation
   duration/easing below. */
@keyframes coins-purchase-flash { 0% { opacity: 0; } 10% { opacity: 0.4; } 90% { opacity: 0.4; } 100% { opacity: 0; } }
@keyframes coins-purchase-text { 0% { color: var(--game-color-black); } 10% { color: var(--game-color-midgreen); } 90% { color: var(--game-color-midgreen); } 100% { color: var(--game-color-black); } }
#coins-popup-total.coins-credited{color: #fff;}
#coins-popup-total.coins-credited::before{background: var(--game-color-green01); opacity: 1; animation: coins-purchase-flash 2s linear forwards;}
#coins-popup-total.coins-credited .coins-total-all{animation: coins-purchase-flash-text 2s linear forwards;}

#store-coins{display: block; width: 100%; border-radius: 10px; margin-bottom: 20px; padding: 0; overflow: hidden; box-sizing: border-box; background: var(--game-color-greygrad); transition: all 1s ease-out 0.1s; position: relative;}
#store-coins-options{display: block; height: auto; max-height: 0; padding: 0 15px; margin: 0; overflow: hidden; transition: all 0.7s ease-out 0s;}
#store-coins .get-coins-message{font-family: sans-serif; font-size: var(--game-font-size-small);}
#store-coins #btn-store-coins-options .btn-closed{display: block;}
#store-coins #btn-store-coins-options .btn-open{display: none;}
#store-coins.open #store-coins-options{max-height: 1500px;}
#store-coins.open #btn-store-coins-options{background: transparent; padding-right: 0; box-shadow: none;}
#store-coins.open #btn-store-coins-options .btn-closed{display: none;}
#store-coins.open #btn-store-coins-options .btn-open{display: block;}
.store-coins-options-spacer{display: block; width: 100%; height: 15px;}
#btn-store-coins-options{}
#store-coins .coins-total-all{color: var(--game-color-black); font-size: var(--game-font-size-large); }

/* Daily free coins banner (rendered by js/daily-coins-tk.js). Three states
   via the container class: .daily-coins-get / .daily-coins-claimed /
   .daily-coins-login. Hidden entirely while unknown (.hidden). */
#daily-coins-banner{display: flex; width: 100%; box-sizing: border-box; align-items: center; gap: 10px; padding: 4px 8px; margin: 0 0 10px 0; border: 2px solid var(--game-color-green01); border-radius: 8px; position: relative; z-index: 1;}
#daily-coins-banner::before{content: ' '; background: var(--game-color-green01); opacity: 0.2; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: 7px;}
#daily-coins-banner.hidden{display: none;}
#daily-coins-banner .daily-coins-icon{display: block; width: 30px;  flex: 0 0 auto;}
#daily-coins-banner .daily-coins-text{display: flex; font-family: sans-serif; flex-direction: column; flex: 1 1 auto; line-height: 1.15; color: var(--game-color-darkgreen); font-size: var(--game-font-size-small);}
#daily-coins-banner .daily-coins-text b{font-size: var(--game-font-size-normal); font-weight: normal;}
#daily-coins-banner #daily-coins-get-btn{flex: 0 0 auto; padding: 6px 18px;}
#daily-coins-banner #daily-coins-get-btn:disabled{opacity: 0.6;}
/* Guest state: whole banner is one tap target. */
#daily-coins-banner.daily-coins-login{padding: 0;}
#daily-coins-banner #daily-coins-login-btn{display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; box-sizing: border-box; color: var(--game-color-darkgreen); text-decoration: none;}
#daily-coins-banner.daily-coins-login .daily-coins-text{display: block;}
/* Claimed state: quieter, centred message. */
#daily-coins-banner.daily-coins-claimed{justify-content: flex-start;}
#daily-coins-banner.daily-coins-claimed .daily-coins-icon{width: 28px; height: 28px;}
#daily-coins-banner.daily-coins-claimed .daily-coins-text{flex: 0 1 auto;}
#store-coins .iap-container{display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 15px 0; margin: 0; width: 47%; max-width: none; border-top: 1px solid rgba(0,0,0,0.2); background: none; box-sizing: border-box;}
#store-coins .iap-container:nth-of-type(1){background: url(../img/coins.svg) center right no-repeat; background-size: auto 60%;}
#store-coins .iap-container:nth-of-type(2){background: url(../img/coins.svg) center right no-repeat; background-size: auto 60%;}
#store-coins .iap-container:nth-of-type(3){background: url(../img/56.svg) center right no-repeat; background-size: auto 80%;}
#store-coins .iap-container:nth-of-type(4){background: url(../img/56.svg) center right no-repeat; background-size: auto 80%;}
#store-coins .iap-container:nth-of-type(5){background: url(../img/42.svg) center right no-repeat; background-size: auto 91%;}
#store-coins .iap-container:nth-of-type(6){background: url(../img/42.svg) center right no-repeat; background-size: auto 91%;}
#store-coins .iap-button{padding: 7px 15px;}
#store-coins .iap-container h2{font-size: var(--game-font-size-normal); font-weight: var(--game-font-weight-normal); line-height: var(--game-font-lineheight-normal); padding: 0; margin: 0 0 5px 0;}
#store-coins .coins-info{display: flex; align-items: center; justify-content: space-between;}
.coins-icon{display: block; width: 40px; height: 40px; background: url(--tile-coins-img) center no-repeat; background-size: contain; margin: 0 10px 0 0;}

#home-tutorial img{margin: 0 auto;}

#wp-updates{display: block; padding: 0; margin: 0 0 20px 0;}
#wp-updates .news-item{display: block; padding: 0 0 20px 0; margin: 20px 0 0 0; border-bottom: 1px solid rgba(255,255,255,0.2);}
#wp-updates .news-item p{padding: 0; margin: 0;}
#wp-updates .news-item .date{opacity: 0.5; margin-bottom: 10px;}

#achievements-panels-nav{display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; position: relative; margin-top: 50px;}
#achievements-panels-nav a{display: flex; align-items: center; justify-content: space-between; border: 2px solid rgba(0,0,0,0.5); background: rgba(0,0,0,0.5); width: 45px; height: 45px; text-align: left; border-radius: 10px; box-sizing: border-box; transition: all 0.2s ease-in-out; text-align: left; padding: 0; color: #fff;}
#achievements-panels-nav a .achievements-title{display: block; font-size: 17px; line-height: 18px; width: auto; max-width: 0; margin: 0; padding: 0; overflow: hidden; transition: all 0.2s ease-in-out;}
#achievements-panels-nav a .achievements-title-inner{display: block; padding: 0; box-sizing: border-box;}
#achievements-panels-nav a .achievements-square{display: block; width: 45px; height: auto; aspect-ratio: 1/1; margin: 0;}
#achievements-panels-nav a.wood .achievements-square{background: var(--tile-dead02-img); background-size: 70%;}
#achievements-panels-nav a.stone .achievements-square{background: var(--tile-ruins02-img); background-size: 70%;}
#achievements-panels-nav a.special .achievements-square{background: var(--tile-diamond02-img); background-size: 70%;}
#achievements-panels-nav a.stats .achievements-square{background: var(--tile-00-img); background-size: 70%;}
#achievements-panels-nav a.active{width: calc(100% - 150px); border-color: #fff;}
#achievements-panels-nav a.active .achievements-title{max-width: calc(100px); padding-left: 10px;}

#achievements-panels{display: block; width: 100%; height: auto; margin: 0; text-align: center; padding: 0; box-sizing: border-box; overflow: hidden;}
#achievements-panels.achievements-01 #achievements-panels-inner{transform: translateX(0);}
#achievements-panels.achievements-02 #achievements-panels-inner{transform: translateX(-25%);}
#achievements-panels.achievements-03 #achievements-panels-inner{transform: translateX(-50%);}
#achievements-panels.achievements-04 #achievements-panels-inner{transform: translateX(-75%);}
#achievements-panels.achievements-01 #achievements-panel-wood,
	#achievements-panels.achievements-02 #achievements-panel-stone,
	#achievements-panels.achievements-03 #achievements-panel-special,
	#achievements-panels.achievements-04 #achievements-panel-stats{max-height: 1500px; opacity: 1;}
#achievements-panels-inner{display: flex; flex-direction: row; width: 400%; align-items: flex-start; justify-content: flex-start; transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);}
#achievements-panels-inner .achievements-panel{display: flex; flex-direction: row; gap: 12px; max-height: 0px; opacity: 0; overflow: hidden; transition: all 0.5s linear 0.2s; flex-wrap: wrap; align-items: center; justify-content: center; width: 25%; height: auto; overflow: auto; box-sizing: border-box; padding: 20px 0; position: relative;}
#achievements-list .achievement{display: block; max-width: calc(30%); width: 200px; aspect-ratio: auto; position: relative; padding: 0px;}
#achievements-list .achievement[data-status="none"] .achievement-icon{opacity: 0.5;}
#achievements-list .achievement-title{display: none;}
#achievements-list .achievement-progress{display: block; margin: 0 auto; position: relative;}
#achievements-list .achievement-progress-num{display: none;}
#achievements-list .achievement-progress-bar{display: block; width: 50%; margin: 0 auto; border-radius: 3px; overflow: hidden; height: 6px; background: rgba(0,0,0,0.4);}
#achievements-list .achievement-progress-bar-inner{display: block; width: 0; height: 6px; background: var(--game-color-green01); transition: all 0.5s ease-out;}
.achievement-stroke{fill: none; stroke: var(--game-color-green01); stroke-miterlimit: 10; stroke-width: 4px;}
.achievement[data-status="bronze"],
	#achievement-popup[data-status="bronze"].achievement[data-status="bronze"]{}
.achievement[data-status="bronze"] .achievement-stroke,
	#achievement-popup[data-status="bronze"] .achievement-stroke{stroke: rgba(255,165,1,1);}
	#achievement-popup[data-status="bronze"] .achievement-icon{background: linear-gradient(45deg, rgba(255,165,1,0.2) 0%, rgba(255,165,1,0.05) 100%); opacity: 1;}
.achievement[data-status="silver"],
	#achievement-popup[data-status="silver"]{}
.achievement[data-status="silver"] .achievement-stroke,
	#achievement-popup[data-status="silver"] .achievement-stroke{stroke: rgba(192,192,192,1);}
	#achievement-popup[data-status="silver"] .achievement-icon{background: linear-gradient(45deg, rgba(192,192,192,0.2) 0%, rgba(192,192,192,0.05) 100%); opacity: 1;}
.achievement[data-status="gold"],
	#achievement-popup[data-status="gold"]{}
.achievement[data-status="gold"] .achievement-stroke,
	#achievement-popup[data-status="gold"] .achievement-stroke{stroke: rgba(248,189,1,1);}
	#achievement-popup[data-status="gold"] .achievement-icon{background: linear-gradient(45deg, rgba(248,189,1,0.2) 0%, rgba(248,189,1,0.05) 100%); opacity: 1;}
#achievement-popup #btn-achievement-popup-close{color: var(--game-color-brown);}
.achievement[data-status="gold"] .achievement-progress::before{display: block; content: ' '; width: 15px; height: 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49.68 35.46'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 7px; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Etripleopolis-micro-icons%3C/title%3E%3Cpolyline class='cls-1' points='3.5 17.73 17.73 31.96 46.19 3.5'/%3E%3C/svg%3E%0A") center no-repeat; background-size: contain;}
#achievements-list .achievement[data-status="gold"] .achievement-progress-bar,
	#achievements-list .achievement[data-status="gold"] .achievement-progress-bar-inner{display: none;}
#achievement-popup,
	.popup-small{display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; max-width: var(--game-popup-max-width); padding: 20px; transition: all 0.3s cubic-bezier(.34,1.56,.64,1); background-color: #fff; border-radius: 20px; overflow: hidden; aspect-ratio: 1/1.2; width: 90vw; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.4); z-index: 990; color: var(--game-color-black); visibility: hidden; opacity: 0; text-align: center; box-shadow: 0px 19px 84px 0px rgba(0,0,0,0.85);}
#achievement-popup.active,
	.popup-small.active{visibility: visible; opacity: 1; transform: translate(-50%, -50%) scale(1);}
#achievement-popup[data-status="bronze"].active .achievement-icon-wrapper::after,
	#achievement-popup[data-status="silver"].active .achievement-icon-wrapper::after,
	#achievement-popup[data-status="gold"].active .achievement-icon-wrapper::after{animation: achievementShine 12s forwards 0.3s;}
#achievement-popup .content{display: block; width: 100%; max-width: var(--game-max-width); margin: 0 auto;}
#achievement-popup .achievement-icon-wrapper{max-width: 50%; margin: 15px auto; width: 140px;}
#achievement-popup .achievement-popup-icon{width: 100%;}
#achievement-popup .achievement-icon{border-radius: 50%; overflow: hidden; opacity: 0.2;}
#achievement-popup .achievement-popup-targets{display: flex; flex-direction: row; align-items: center; justify-content: center;}
#achievement-popup .achievement-popup-targets .target{display: block; width: 33%; background: rgba(0,0,0,0.2); padding: 8px 8px; border-radius: 6px; line-height: normal; overflow: hidden; margin: 10px 1.5%;}
#achievement-popup .achievement-popup-targets .target-bronze{background: rgba(255,165,1,0.2); color: #000; border: 2px solid rgba(255,165,1,1);}
#achievement-popup[data-status="bronze"] .achievement-popup-targets .target-bronze{background: linear-gradient(45deg, rgba(255,165,1,1) 0%, rgba(255,165,1,0.6) 100%);}
#achievement-popup .achievement-popup-targets .target-silver{background: rgba(192,192,192,0.2); color: #000; border: 2px solid rgba(192,192,192,1);}
#achievement-popup[data-status="silver"] .achievement-popup-targets .target-silver{ background: linear-gradient(45deg, rgba(192,192,192,1) 0%, rgba(192,192,192,0.6) 100%);}
#achievement-popup .achievement-popup-targets .target-gold{background: rgba(248,189,1,0.2); color: #000; border: 2px solid rgba(248,189,1,1);}
#achievement-popup[data-status="gold"] .achievement-popup-targets .target-gold{background: linear-gradient(45deg, rgba(248,189,1,1) 0%, rgba(248,189,1,0.6) 100%);}
#achievement-popup .achievement-stroke{stroke: var(--game-color-black);}
.achievement-icon-wrapper{position: relative; display: block; width: 90%; max-width: 90%; margin: 15px auto; aspect-ratio: 1/1; overflow: hidden; border-radius: 50%;}
.achievement-icon-wrapper::after{content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent); transform: skewX(-20deg); pointer-events: none; }
.achievement[data-status="bronze"] .achievement-icon-wrapper::after,
	.achievement[data-status="silver"] .achievement-icon-wrapper::after,
	.achievement[data-status="gold"] .achievement-icon-wrapper::after{animation: achievementShine 12s infinite 0.3s;}
/*
.achievement-icon-wrapper::after
.achievement-icon{display: block;}
*/

.popup-small{justify-content: flex-start !important; padding: 0 !important; overflow: scroll !important;}
.popup-small .popup-header{display: block; width: 100%; background: #ccfcff; margin-bottom: 15px;}
.popup-small .content{display: block; padding: 0 20px 30px 20px !important; box-sizing: border-box; width: 100%;}
.popup-small .content p{display: block; width: 100%;}
.popup-small .col-container{gap: 12px;}
.popup-small-panels{display: block; width: 100%; height: auto; margin: 0; text-align: center; padding: 0; box-sizing: border-box; overflow: hidden;}
.popup-small-panels-inner{display: flex; flex-direction: row; width: 200%; align-items: flex-start; justify-content: flex-start; transition: transform 0.2s ease-in-out;}
.popup-small-panels-02[data-panel="panel-01"] .popup-small-panels-inner{transform: translateX(0);}
.popup-small-panels-02[data-panel="panel-02"] .popup-small-panels-inner{transform: translateX(-50%);}
.popup-small-panels-02 .popup-small-panel{display: flex; flex-direction: row; gap: 0; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; width: 50%; height: auto; overflow: auto; box-sizing: border-box; padding: 0; position: relative;}
#change-username-form{display: block; width: 100%;}

@keyframes achievementShine {
    0% {left: -150%;}
    6% {left: 100%;}
    12% {left: -150%;}
	100% {left: -150%;}
}

/*
// SLIDER v1.2
#highscores-panels-nav{display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; position: relative; margin-top: 50px;}
#highscores-panels-nav a{display: flex; align-items: center; justify-content: space-between; border: 2px solid rgba(0,0,0,0.5); background: rgba(0,0,0,0.5); width: 45px; height: 45px; text-align: left; border-radius: 10px; box-sizing: border-box; transition: all 0.2s ease-in-out; text-align: left; padding: 0; color: #fff;}
#highscores-panels-nav a .highscores-title{display: block; font-size: 17px; line-height: 18px; width: auto; max-width: 0; margin: 0; padding: 0; overflow: hidden; transition: all 0.2s ease-in-out;}
#highscores-panels-nav a .highscores-title-inner{display: block; padding: 0; box-sizing: border-box;}
#highscores-panels-nav a .highscores-square{display: block; width: 45px; height: auto; aspect-ratio: 1/1; margin: 0;}
#highscores-panels-nav a.map-grasslands .highscores-square{background: var(--map-dots-grasslands); background-size: 80%;}
#highscores-panels-nav a.map-tropicalisland .highscores-square{background: var(--map-dots-tropicalisland); background-size: 80%;}
#highscores-panels-nav a.map-centrallake .highscores-square{background: var(--map-dots-centrallake); background-size: 80%;}
#highscores-panels-nav a.map-windingriver .highscores-square{background: var(--map-dots-windingriver); background-size: 80%;}
#highscores-panels-nav a.map-thefort .highscores-square{background: var(--map-dots-thefort); background-size: 80%;}
#highscores-panels-nav a.active{width: calc(100% - 200px); border-color: #fff;}
#highscores-panels-nav a.active .highscores-title{max-width: calc(20vw - 30px); padding-left: 10px;}
*/

#highscores-panels-nav{display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; position: relative; margin-top: 30px;}
#highscores-panels-nav a{display: flex; align-items: center; justify-content: space-between; border: 0; background: rgba(0,0,0,0.5); width: 100%; height: 50px; max-height: 0; overflow: hidden; text-align: left; border-radius: 10px; box-sizing: border-box; transition: all 0.2s ease-in-out; text-align: left; padding: 0; color: #fff; margin: 0 0 5px 0;}
#highscores-panels-nav a .highscores-title{display: block; font-size: 17px; line-height: 18px; margin: 0; padding: 0 0 0 10px;;}
#highscores-panels-nav a .highscores-title-inner{display: block;}
#highscores-panels-nav a .highscores-square{display: block; width: 50px; height: auto; aspect-ratio: 1/1; margin: 0;}
#highscores-panels-nav a.map-grasslands .highscores-square{background: var(--map-dots-grasslands); background-size: 80%;}
#highscores-panels-nav a.map-tropicalisland .highscores-square{background: var(--map-dots-tropicalisland); background-size: 80%;}
#highscores-panels-nav a.map-centrallake .highscores-square{background: var(--map-dots-centrallake); background-size: 80%;}
#highscores-panels-nav a.map-windingriver .highscores-square{background: var(--map-dots-windingriver); background-size: 80%;}
#highscores-panels-nav a.map-thefort .highscores-square{background: var(--map-dots-thefort); background-size: 80%;}
#highscores-panels-nav a.map-crumblingcamelot .highscores-square{background: var(--map-dots-crumblingcamelot); background-size: 80%;}
#highscores-panels-nav a.map-peacefulprairie .highscores-square{background: var(--map-dots-peacefulprairie); background-size: 80%;}
#highscores-panels-nav a.map-mountaintop .highscores-square{background: var(--map-dots-mountaintop); background-size: 80%;}
#highscores-panels-nav a.active{border: 2px solid #fff; max-height: 50px;}
#highscores-panels-nav.open a{max-height: 55px;}
#highscores-panels-nav .fox{display: none;}

#highscores-panels{display: block; width: 100%; height: auto; margin: 0; text-align: center; padding: 0; box-sizing: border-box; overflow: hidden;}
#highscores-panels.highscores-01 #highscores-panels-inner{transform: translateX(0);}
#highscores-panels.highscores-02 #highscores-panels-inner{transform: translateX(-10%);}
#highscores-panels.highscores-03 #highscores-panels-inner{transform: translateX(-20%);}
#highscores-panels.highscores-04 #highscores-panels-inner{transform: translateX(-30%);}
#highscores-panels.highscores-05 #highscores-panels-inner{transform: translateX(-40%);}
#highscores-panels.highscores-06 #highscores-panels-inner{transform: translateX(-50%);}
#highscores-panels.highscores-07 #highscores-panels-inner{transform: translateX(-60%);}
#highscores-panels.highscores-08 #highscores-panels-inner{transform: translateX(-70%);}
#highscores-panels-inner{display: flex; flex-direction: row; width: 1000%; align-items: flex-start; justify-content: flex-start; transition: transform 0.2s ease-in-out;}
#highscores-panels-inner .highscores-panel{display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; width: 10%; height: auto; overflow: auto; box-sizing: border-box; padding: 0 0 20px 0; position: relative;}
#highscores-panels .highscores-table{display: block; width: 100%;}

/* Legacy Scores: same layout as Top Scores, cloned onto #legacyscores-* IDs */
#legacyscores-panels-nav{display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; position: relative; margin-top: 30px;}
#legacyscores-panels-nav a{display: flex; align-items: center; justify-content: space-between; border: 0; background: rgba(0,0,0,0.5); width: 100%; height: 50px; max-height: 0; overflow: hidden; text-align: left; border-radius: 10px; box-sizing: border-box; transition: all 0.2s ease-in-out; text-align: left; padding: 0; color: #fff; margin: 0 0 5px 0;}
#legacyscores-panels-nav a .highscores-title{display: block; font-size: 17px; line-height: 18px; margin: 0; padding: 0 0 0 10px;;}
#legacyscores-panels-nav a .highscores-title-inner{display: block;}
#legacyscores-panels-nav a .highscores-square{display: block; width: 50px; height: auto; aspect-ratio: 1/1; margin: 0;}
#legacyscores-panels-nav a.active{border: 2px solid #fff; max-height: 50px;}
#legacyscores-panels-nav.open a{max-height: 55px;}
#legacyscores-panels-nav .fox{display: none;}

#legacyscores-panels{display: block; width: 100%; height: auto; margin: 0; text-align: center; padding: 0; box-sizing: border-box; overflow: hidden;}
#legacyscores-panels.legacyscores-01 #legacyscores-panels-inner{transform: translateX(0);}
#legacyscores-panels.legacyscores-02 #legacyscores-panels-inner{transform: translateX(-10%);}
#legacyscores-panels.legacyscores-03 #legacyscores-panels-inner{transform: translateX(-20%);}
#legacyscores-panels.legacyscores-04 #legacyscores-panels-inner{transform: translateX(-30%);}
#legacyscores-panels.legacyscores-05 #legacyscores-panels-inner{transform: translateX(-40%);}
#legacyscores-panels.legacyscores-06 #legacyscores-panels-inner{transform: translateX(-50%);}
#legacyscores-panels.legacyscores-07 #legacyscores-panels-inner{transform: translateX(-60%);}
#legacyscores-panels-inner{display: flex; flex-direction: row; width: 1000%; align-items: flex-start; justify-content: flex-start; transition: transform 0.2s ease-in-out;}
#legacyscores-panels-inner .highscores-panel{display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; width: 10%; height: auto; overflow: auto; box-sizing: border-box; padding: 0 0 20px 0; position: relative;}
#legacyscores-panels .highscores-table{display: block; width: 100%;}

/* Background map styles - maintain existing variables */
.map-grasslands .highscores-square { background: var(--map-dots-grasslands); background-size: 80%; }
.map-tropicalisland .highscores-square { background: var(--map-dots-tropicalisland); background-size: 80%; }
.map-centrallake .highscores-square { background: var(--map-dots-centrallake); background-size: 80%; }
.map-windingriver .highscores-square { background: var(--map-dots-windingriver); background-size: 80%; }
.map-thefort .highscores-square { background: var(--map-dots-thefort); background-size: 80%; }
.map-crumblingcamelot .highscores-square { background: var(--map-dots-crumblingcamelot); background-size: 80%; }

.fox{display: flex; align-items: flex-end; overflow: visible; justify-content: center; width: 55px; height: auto; aspect-ratio: 1/1.5; margin: 0; position: absolute; z-index: 3; top: 0; left: 0; transform: translate(0, -101%); transition: all 0.75s ease-in-out; background-color: transparent;}
.fox.anim{animation: animBearMove 0.75s ease-in-out 0s forwards; background-color: transparent;}
.fox-svg{display: block; width: 85%; overflow: visible;}
.fox-st0{fill:#002D00;}
.fox-st1{fill:#BD721E;}
.fox-st2{fill:url(#fox-svgid-1_);}
.fox-st3{fill:url(#fox-svgid-2_);}
.fox-st4{fill:#572B00;}
.fox-st5{/*fill:url(#fox-svgid-3_);*/ fill:#FFFFFF;}
.fox-st6{fill:#533E32;}
.fox-st7{fill:#FFFFFF;}
.fox-st8{fill:#E30613;}
.fox-body{transform-origin: center center;}
.fox-feet{transform-origin: center center;}
.fox-face{transform-origin: center center;}
.fox-shadow{transform-origin: bottom center;}
.fox-heart{transform-origin: center center; transform: translate(60%, 0) scale(0.7); opacity: 0; }
.fox-eye-left,
	.fox-eye-right{transform-origin: center center;}
.fox.anim-jump .fox-body{animation: foxJump01 1s forwards;}
.fox.anim-jump .fox-feet{animation: foxJump01 1.1s forwards ease-in-out;}
.fox.anim-jump .fox-face{animation: foxJump01 0.9s forwards ease-in-out;}
.fox.anim-jump .fox-shadow{animation: foxJump01Shadow 0.9s forwards ease-in-out;}
.fox.anim-blink .fox-eye-left,
	.fox.anim-blink .fox-eye-right {animation: foxBlink01 2s forwards;}
.fox.anim-tilt01 .fox-face {animation: foxTurnHeadRight 1.5s forwards ease-in-out;}
.fox.anim-tilt02 .fox-face {animation: foxTurnHeadLeft 1.5s forwards ease-in-out;}
.fox.anim-heart .fox-heart {animation: foxHeart 1.5s forwards ease-in-out;}

@keyframes foxBlink01 {
    0% {transform: scaleY(1);}
    50% {transform: scaleY(0);}
	100% {transform: scaleY(1);}
}
@keyframes foxHeart {
    0% {transform: translate(60%, 0) scale(0.7); opacity: 0;}
    20% {opacity: 1;}
	50% {transform: translate(80%, -30%) scale(1.2); opacity: 1;}
	80% {opacity: 1;}
	100% {transform: translate(80%, -60%) scale(1.2); opacity: 0;}
}
@keyframes foxTurnHeadRight {
    0% {transform: rotate(0) translateX(0);}
    50% {transform: rotate(20deg) translateX(5%);}
	100% {transform: rotate(0) translateX(0);}
}
@keyframes foxTurnHeadLeft {
    0% {transform: rotate(0) translateX(0);}
    50% {transform: rotate(-20deg) translateX(-5%);}
	100% {transform: rotate(0) translateX(0);}
}

@keyframes foxJump01 {
    0% {transform: translateY(0);}
    50% {transform: translateY(-20%);}
	100% {transform: translateY(0);}
}
@keyframes foxJump01Shadow {
    0% {transform: scale(1);}
    50% {transform: scale(0.6);}
	100% {transform: scale(1);}
}

.settings-toggle-container{display: flex; flex-direction: row; width: 100%; align-items: flex-start; justify-content: space-between; transition: transform 0.2s ease-in-out;}
.settings-toggle-title{}
.toggle-fox{display: block; width: 70px; height: 30px; position: relative;}
.toggle-fox .label-off{width: 30px; color: var(--game-color-orange); position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -100%); opacity: 0; transition: all 0.7s cubic-bezier(.34,2.5,.64,1) 0s; font-size: 20px;}
.toggle-fox .label-on{width: 30px; color: var(--game-color-green01); position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -100%); opacity: 0; transition: all 0.7s cubic-bezier(.34,2.5,.64,1) 0s; font-size: 20px;}
.toggle-fox .fox{width: 50%; position: absolute; z-index: 1; bottom: 0; top: auto; transition: all 0.3s linear;}
.toggle-fox .lever{width: 100%; position: absolute; z-index: 2; bottom: 0; left: 50%; transform-origin: center bottom; border-bottom: 3px solid var(--game-color-brown); transform: translate(-50%, 0); transition: all 0.3s linear;}
.toggle-fox .pivot{width: 8px; height: 8px; border-radius: 50%; overflow: hidden; position: absolute; z-index: 2; top: 100%; left: 50%; transform: translateX(-50%); background-color: var(--game-color-brown);}
.toggle-fox .fox.anim-jump .fox-body{animation: foxJump01 0.5s forwards;}
.toggle-fox .fox.anim-jump .fox-feet{animation: foxJump01 0.6s forwards ease-in-out;}
.toggle-fox .fox.anim-jump .fox-face{animation: foxJump01 0.4s forwards ease-in-out;}
.toggle-fox .fox.anim-jump .fox-shadow{animation: foxJump01Shadow 0.4s forwards ease-in-out;}
.toggle-fox .fox-svg{width: 100%;}
.toggle-fox.off .fox{left: 0; transform: translate(0,0);}
.toggle-fox.off .lever{transform: translate(-50%, 0) rotate(-10deg);}
.toggle-fox.off .label-off{opacity: 1; transform: translate(10%, -100%);}
.toggle-fox.on .label-on{opacity: 1; transform: translate(-110%, -100%);}
.toggle-fox.on .fox{left: 100%; transform: translate(-100%, 0);}
.toggle-fox.on .lever{transform: translate(-50%, 0) rotate(10deg);}
#settings-nickname{text-align: left;}
#settings-nickname-response{display: none;}
#settings-nickname-response.active{display: block; padding: 15px 0;}
.error{color: var(--game-color-red);}
.success{color: var(--game-color-green01);}

.video-frame { border: 5px solid var(--white); border-radius: 40px; background: #001f00; overflow: hidden; margin-bottom: 30px; }
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

#home p{margin: 0; padding: 0;}
#home .content{padding: 20px 0;}
#home-menu-nav{display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; max-width: var(--game-max-width); margin: 0 auto;}
/*#home-menu-nav a{display: block; margin: 0 auto; padding: 8px 0; font-size: 20px; text-decoration: none; border: 1px solid var(--game-color-orange); border-radius: 50px; width: calc(50% - 8px); padding: 10px 15px; box-sizing: border-box; margin: 10px 0;}*/
#home-menu-nav a.btn-sign{display: block; width: calc(50% - 2px); box-sizing: border-box; margin: 3px 0; font-size: 18px;}

#home-menu-nav #btn-home-play{width: 100%; font-size: 30px;}
#btn-home-play.disabled{opacity: 0.5; pointer-events: none;}
/* Top Scores / Achievements greyed for guests (still clickable -> routes to login). */
#btn-home-scores.disabled, #btn-home-achievements.disabled{opacity: 0.55;}
/* Daily-moves reset countdown + TEMP dev reset button. */
#daily-moves-reset{font-size: 14px; color: var(--game-color-green01); margin-top: 2px;}
#btn-reset-daily-moves{margin-top: 6px; font-size: 12px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.4); background: rgba(0,0,0,0.25); color: #fff;}
#home #home-loadgame{display: none;}
#home #home-loadgame.active{display: block;}
#home-menu-user{flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden; text-align: left; gap: 10px;}

.home-popup{display: block; position: relative; justify-content: center; align-items: center; width: 100vw; height: auto; background: var(--game-color-darkgreen); opacity: 0; height: 0; max-height: 0; overflow: hidden; pointer-events: none; visibility: hidden; transition: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none;}
.home-popup.active{opacity: 1; visibility: visible; pointer-events: initial; overflow-y: auto; overflow-x: hidden; height: auto; max-height: none;}
.home-popup .sign-container{display: block; position: relative; overflow: visible; width: fit-content; margin-bottom: 20px;}
.home-popup .sign-container .rope01{display: block; width: 20px; height: 100px; position: absolute; top: -70px; left: 20px; transform: translateY(-100%); background: url(../img/sign-rope.svg) top center no-repeat; overflow: hidden; content: ' '; transform: translateY(-200px); transition: none;}
.home-popup .sign-container .rope02{display: block; width: 20px; height: 100px; position: absolute; top: -70px; right: 20px; transform: translateY(-100%); background: url(../img/sign-rope.svg) top center no-repeat; overflow: hidden; content: ' '; transform: translateY(-200px); transition: none;}
.home-popup h1.sign{display: block; width: auto; max-width: fit-content; text-align: center; font-family: var(--game-font-01); font-size: 40px; padding: 5px 20px; margin-bottom: 0px; line-height: normal; font-weight: normal; border-radius: 4px; background: var(--game-color-browngrad);; border-top: 3px solid var(--game-color-brown); text-shadow: 0px -2px 0px #533E32; position: relative; transform: translateY(-200px); transition: none;}
.home-popup.active h1.sign{transform: translateY(0px); transition: all 0.5s cubic-bezier(.34,1.56,.64,1) 0.2s;}
.home-popup.active .sign-container .rope01,
	.home-popup.active .sign-container .rope02{transform: translateY(0px); transition: all 0.5s cubic-bezier(.34,1.56,.64,1) 0.2s;}

.home-popup .content{display: block; width: 90vw; max-width: var(--game-max-width); margin: 0 auto; text-align: center; margin: 0 auto; padding: 75px 0 75px 0; box-sizing: border-box; position: relative;}
.hidden{display: none;}
.visible{display: block;}

.home-credit{display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 25px 8px;}
.home-credit-me{display: block; width: 50px;}
.home-credit-text{display: block; width: 115px; transform: translateY(-4px);}

#game-container{display: flex; width: 100%; margin: 0 auto; flex-direction: column;}
#game-container .content{margin: 0 auto; padding: 0; max-width: var(--game-max-width); width: 100%;}

#game-board-container{display: grid; width: 100%; max-width: 100%; height: auto; padding: 0; overflow: hidden; position: relative;}
#sky{display: block; width: 100%; align-items: center; justify-content: space-between; padding: 0; overflow: hidden; margin: 0px auto; background: linear-gradient(180deg, rgba(0,71,140,1) 0%, rgba(34,152,204,1) 100%); box-sizing: border-box; position: relative; z-index: 1;}
/*#sky-menu{position: absolute; top: 50px; right: 25px; z-index: 10; display: block; width: 45px; height: 45px; background: url(../img/sky-nav.svg) center no-repeat; background-size: 80%; padding: 0; text-indent: -999px; overflow: hidden; box-sizing: border-box;}*/
.sky-logo{position: absolute; top: 68px; left: 20px; z-index: 8; display: none; width: 100%; max-width: 100px; padding: 0;}
.sky-gradient{display: block; position: absolute; top: 0; right: 0; left: 0; bottom: 10px; width: 100%; height: calc(100% - 10px); z-index: 0;}
.sky-gradient-inner{display: block; position: relative; width: 100%; height: 100%; z-index: 0; background: rgba(3,0,38,1) 0%;}
.sky-gradient-innergrad{display: block; position: absolute; width: 100%; height: 3000px; animation: skyColorGradient 60s linear 0s infinite; top: 0; left: 0; background: linear-gradient(0deg, rgba(3,0,38,1) 0%, rgba(3,0,38,1) 7.1%, rgba(59,20,125,1) 15%, rgba(202,96,154,1) 30%, rgba(247,174,92,1) 41%, rgba(255,243,119,1) 51%, rgba(226,255,237,1) 61%, rgba(113,218,246,1) 69%, rgba(36,160,220,1) 79%, rgba(6,58,106,1) 86%, rgba(3,0,38,1) 93%, rgba(3,0,38,1) 100%);}
.sky-trees{position: absolute; bottom: 0; left: 0; z-index: 9;}
.sky-grass{display: block; width: 100%; height: 30%; position: absolute; bottom: 0; left: 0; z-index: 2; background: var(--game-bg-01); background-position: top; background-size: cover;}
.sky-cliffs{position: absolute; bottom: 0; left: 0; z-index: 3;}
.sky-cliffs-sizer{}
.sky-cliffs-overlay{position: absolute; bottom: 0; left: 0; z-index: 4;}
.sky-cliffs-overlay-path{display: block; width: 100%; fill: #000c2b; animation: skyCliffColor 60s linear 0s infinite; opacity: 0.25; z-index: 5;}
#sky-sun-moon{display: flex; align-items: center; flex-direction: row; justify-content: space-between; animation: animSunMoonParent 60s linear 0s infinite; width: 150%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; position: absolute; left: 50%; top: 10px; transform: translateX(-50%);}
#sky-sun,
	#sky-moon{display: block; width: 70px; height: 70px; animation: animSunMoon 60s linear 0s infinite; flex-direction: column; animation-direction: reverse;}
#sky-sun{background: url(../img/sun.svg);}
#sky-moon{background: url(../img/moon.svg);}

#game {
  display: grid;
	width: 100%;
	max-width: 100%;
  	gap: 0px;
	background: var(--game-bg-01); background-size: cover;
	margin: 0 auto;
	position: relative;
	font-family: var(--game-font-02);
	padding-bottom: 15px;
	z-index: 2;
}
/* Chequered background */
#game::before{content: ' '; display: block; opacity: 0.06; background: var(--game-bg-chequer); /*animation: animChequer 6s linear 0s infinite; */background-size: 28.5%; background-repeat: repeat; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; aspect-ratio: 1 / 1; width: 100%; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none}
/*#game::after{content: ' '; display: block;  background: blue; position: absolute; top: 0; left: 0; right: 0; z-index: 0; width: 100%; height: 100px; transform: translateY(-100%);} // Show graphic under cliffs */
#game.grid-5{
	grid-template-columns: repeat(5, calc(100% / 5));
	grid-template-rows: repeat(5, calc(100% / 5));
}
#game.grid-5::before{background-size: 40%;}
#game.grid-6{
	grid-template-columns: repeat(6, calc(100% / 6));
	grid-template-rows: repeat(6, calc(100% / 6));
}
#game.grid-6::before{background-size: 33.33%;}
#game.grid-7{
	grid-template-columns: repeat(7, calc(100% / 7));
	grid-template-rows: repeat(7, calc(100% / 7));
}
#game.grid-7::before{background-size: 28.5%;}
#game.grid-8{
	grid-template-columns: repeat(8, 12.5%);
	grid-template-rows: repeat(8, 12.5%);
}
#game.grid-8::before{background-size: 25%;}
#game div {display: block; /*background: #0c3d02;*/ position: relative; aspect-ratio: 1 / 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none}
#game div::before{content: ' '; display: block; width: 100%; height: 100%; transform-origin: center; /*transition: all 0.5s ease-out 0s;*/ transform: translate(0, 0); position: absolute; bottom: 0; left: 0; width: 100%; height: 150%; z-index: 1; pointer-events: none;}
#game div::after{content: ' '; display: block; background: #fff; border-radius: 50%; width: 100%; height: 100%; transform-origin: center; transform: translate(-50%, -50%) scale(0.5, 0.25); opacity: 0; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; pointer-events: none;} /* Lightning flash */
#game div[data-number="1"]::before{background: var(--tile-01-img); background-size: cover;}
#game div[data-number="2"]::before{background: var(--tile-02-img); background-size: cover;}
#game div[data-number="2"][data-berries="true"],
	#game div[data-number="2"][data-merged="4"]::before,
	#game div[data-number="2"][data-merged="5"]::before,
	#game div[data-number="2"][data-merged="6"]::before,
	#game div[data-number="2"][data-merged="7"]::before,
	#game div[data-number="2"][data-merged="8"]::before,
	#game div[data-number="2"][data-merged="9"]::before{background: var(--tile-02-img-berries); background-size: cover;}
#game div[data-number="3"]::before{background: var(--tile-03-img); background-size: cover;}
#game div[data-number="3"][data-berries="true"],
	#game div[data-number="3"][data-merged="4"]::before,
	#game div[data-number="3"][data-merged="5"]::before,
	#game div[data-number="3"][data-merged="6"]::before,
	#game div[data-number="3"][data-merged="7"]::before,
	#game div[data-number="3"][data-merged="8"]::before,
	#game div[data-number="3"][data-merged="9"]::before{background: var(--tile-03-img-berries); background-size: cover;}
#game div[data-number="4"]::before{background: var(--tile-04-img); background-size: cover;}
#game div[data-number="4"][data-berries="true"],
	#game div[data-number="4"][data-merged="4"]::before,
	#game div[data-number="4"][data-merged="5"]::before,
	#game div[data-number="4"][data-merged="6"]::before,
	#game div[data-number="4"][data-merged="7"]::before,
	#game div[data-number="4"][data-merged="8"]::before,
	#game div[data-number="4"][data-merged="9"]::before{background: var(--tile-04-img-berries); background-size: cover;}
#game div[data-number="5"]::before{background: var(--tile-05-img); background-size: cover;}
#game div[data-number="5"][data-berries="true"],
	#game div[data-number="5"][data-merged="4"]::before,
	#game div[data-number="5"][data-merged="5"]::before,
	#game div[data-number="5"][data-merged="6"]::before,
	#game div[data-number="5"][data-merged="7"]::before,
	#game div[data-number="5"][data-merged="8"]::before,
	#game div[data-number="5"][data-merged="9"]::before{background: var(--tile-05-img-berries); background-size: cover;}
#game div[data-number="6"]::before{background: var(--tile-06-img); background-size: cover;}
#game div[data-number="6"][data-berries="true"],
	#game div[data-number="6"][data-merged="4"]::before,
	#game div[data-number="6"][data-merged="5"]::before,
	#game div[data-number="6"][data-merged="6"]::before,
	#game div[data-number="6"][data-merged="7"]::before,
	#game div[data-number="6"][data-merged="8"]::before,
	#game div[data-number="6"][data-merged="9"]::before{background: var(--tile-06-img-berries); background-size: cover;}
#game div[data-number="7"]::before{background: var(--tile-07-img); background-size: cover;}
#game div[data-number="7"][data-berries="true"],
	#game div[data-number="7"][data-merged="4"]::before,
	#game div[data-number="7"][data-merged="5"]::before,
	#game div[data-number="7"][data-merged="6"]::before,
	#game div[data-number="7"][data-merged="7"]::before,
	#game div[data-number="7"][data-merged="8"]::before,
	#game div[data-number="7"][data-merged="9"]::before{background: var(--tile-07-img-berries); background-size: cover;}
#game div[data-number="8"]::before{background: var(--tile-08-img); background-size: cover;}
#game div[data-number="8"][data-berries="true"],
	#game div[data-number="8"][data-merged="4"]::before,
	#game div[data-number="8"][data-merged="5"]::before,
	#game div[data-number="8"][data-merged="6"]::before,
	#game div[data-number="8"][data-merged="7"]::before,
	#game div[data-number="8"][data-merged="8"]::before,
	#game div[data-number="8"][data-merged="9"]::before{background: var(--tile-08-img-berries); background-size: cover;}
#game div[data-number="9"]::before{background: var(--tile-09-img); background-size: cover;}
#game div[data-number="9"][data-berries="true"],
	#game div[data-number="9"][data-merged="4"]::before,
	#game div[data-number="9"][data-merged="5"]::before,
	#game div[data-number="9"][data-merged="6"]::before,
	#game div[data-number="9"][data-merged="7"]::before,
	#game div[data-number="9"][data-merged="8"]::before,
	#game div[data-number="9"][data-merged="9"]::before{background: var(--tile-09-img-berries); background-size: cover;}
#game div[data-number="10"]::after { background: var(--tile-10-shadow); background-size: cover; opacity: 1; width: 100%; height: 150%; top: unset; left: 0; bottom: 0; right: 0; transform: none; }
#game div[data-number="10"]::before{background: var(--tile-10-img); background-size: cover; animation: skyCastle 4s ease-in-out 0s infinite; }
#game div[data-number="10"][data-berries="true"],
	#game div[data-number="10"][data-merged="4"]::before,
	#game div[data-number="10"][data-merged="5"]::before,
	#game div[data-number="10"][data-merged="6"]::before,
	#game div[data-number="10"][data-merged="7"]::before,
	#game div[data-number="10"][data-merged="8"]::before,
	#game div[data-number="10"][data-merged="9"]::before{background: var(--tile-10-img-berries); background-size: cover;}
#game div[data-number="1"][data-type="2"]::before{background: var(--tile-01a-img); background-size: cover;}
#game div[data-number="2"][data-type="2"]::before{background: var(--tile-02a-img); background-size: cover;}
	#game div[data-number="2"][data-type="2"][data-berries="true"],
	#game div[data-number="2"][data-type="2"][data-merged="4"]::before,
	#game div[data-number="2"][data-type="2"][data-merged="5"]::before,
	#game div[data-number="2"][data-type="2"][data-merged="6"]::before,
	#game div[data-number="2"][data-type="2"][data-merged="7"]::before,
	#game div[data-number="2"][data-type="2"][data-merged="8"]::before,
	#game div[data-number="2"][data-type="2"][data-merged="9"]::before{background: var(--tile-02a-img-berries); background-size: cover;}
#game div[data-number="3"][data-type="2"]::before{background: var(--tile-03a-img); background-size: cover;}
#game div[data-number="3"][data-type="2"][data-berries="true"],
	#game div[data-number="3"][data-type="2"][data-merged="4"]::before,
	#game div[data-number="3"][data-type="2"][data-merged="5"]::before,
	#game div[data-number="3"][data-type="2"][data-merged="6"]::before,
	#game div[data-number="3"][data-type="2"][data-merged="7"]::before,
	#game div[data-number="3"][data-type="2"][data-merged="8"]::before,
	#game div[data-number="3"][data-type="2"][data-merged="9"]::before{background: var(--tile-03a-img-berries); background-size: cover;}
#game div[data-number="4"][data-type="2"]::before{background: var(--tile-04a-img); background-size: cover;}
#game div[data-number="4"][data-type="2"][data-berries="true"],
	#game div[data-number="4"][data-type="2"][data-merged="4"]::before,
	#game div[data-number="4"][data-type="2"][data-merged="5"]::before,
	#game div[data-number="4"][data-type="2"][data-merged="6"]::before,
	#game div[data-number="4"][data-type="2"][data-merged="7"]::before,
	#game div[data-number="4"][data-type="2"][data-merged="8"]::before,
	#game div[data-number="4"][data-type="2"][data-merged="9"]::before{background: var(--tile-04a-img-berries); background-size: cover;}
#game div[data-number="5"][data-type="2"]::before{background: var(--tile-05a-img); background-size: cover;}
	#game div[data-number="5"][data-type="2"][data-merged="4"]::before,
	#game div[data-number="5"][data-type="2"][data-merged="5"]::before,
	#game div[data-number="5"][data-type="2"][data-merged="6"]::before,
	#game div[data-number="5"][data-type="2"][data-merged="7"]::before,
	#game div[data-number="5"][data-type="2"][data-merged="8"]::before,
	#game div[data-number="5"][data-type="2"][data-merged="9"]::before{background: var(--tile-05a-img-berries); background-size: cover;}
#game div[data-number="6"][data-type="2"]::before{background: var(--tile-06a-img); background-size: cover;}
#game div[data-number="6"][data-type="2"][data-berries="true"],
	#game div[data-number="6"][data-type="2"][data-merged="4"]::before,
	#game div[data-number="6"][data-type="2"][data-merged="5"]::before,
	#game div[data-number="6"][data-type="2"][data-merged="6"]::before,
	#game div[data-number="6"][data-type="2"][data-merged="7"]::before,
	#game div[data-number="6"][data-type="2"][data-merged="8"]::before,
	#game div[data-number="6"][data-type="2"][data-merged="9"]::before{background: var(--tile-06a-img-berries); background-size: cover;}
#game div[data-number="7"][data-type="2"]::before{background: var(--tile-07a-img); background-size: cover;}
#game div[data-number="7"][data-type="2"][data-berries="true"],
	#game div[data-number="7"][data-type="2"][data-merged="4"]::before,
	#game div[data-number="7"][data-type="2"][data-merged="5"]::before,
	#game div[data-number="7"][data-type="2"][data-merged="6"]::before,
	#game div[data-number="7"][data-type="2"][data-merged="7"]::before,
	#game div[data-number="7"][data-type="2"][data-merged="8"]::before,
	#game div[data-number="7"][data-type="2"][data-merged="9"]::before{background: var(--tile-07a-img-berries); background-size: cover;}
#game div[data-number="8"][data-type="2"]::before{background: var(--tile-08a-img); background-size: cover;}
#game div[data-number="8"][data-type="2"][data-berries="true"],
	#game div[data-number="8"][data-type="2"][data-merged="4"]::before,
	#game div[data-number="8"][data-type="2"][data-merged="5"]::before,
	#game div[data-number="8"][data-type="2"][data-merged="6"]::before,
	#game div[data-number="8"][data-type="2"][data-merged="7"]::before,
	#game div[data-number="8"][data-type="2"][data-merged="8"]::before,
	#game div[data-number="8"][data-type="2"][data-merged="9"]::before{background: var(--tile-08a-img-berries); background-size: cover;}
#game div[data-number="9"][data-type="2"]::before{background: var(--tile-09a-img); background-size: cover;}
#game div[data-number="9"][data-type="2"][data-berries="true"],
	#game div[data-number="9"][data-type="2"][data-merged="4"]::before,
	#game div[data-number="9"][data-type="2"][data-merged="5"]::before,
	#game div[data-number="9"][data-type="2"][data-merged="6"]::before,
	#game div[data-number="9"][data-type="2"][data-merged="7"]::before,
	#game div[data-number="9"][data-type="2"][data-merged="8"]::before,
	#game div[data-number="9"][data-type="2"][data-merged="9"]::before{background: var(--tile-09a-img-berries); background-size: cover;}
#game div[data-number="10"][data-type="2"]::after{background: var(--tile-10a-shadow); background-size: cover; opacity: 1; width: 100%; height: 150%; top: unset; left: 0; bottom: 0; right: 0; transform: none; }
#game div[data-number="10"][data-type="2"]::before{background: var(--tile-10a-img); background-size: cover; animation: skyCastle 4s ease-in-out 0s infinite; }
#game div[data-number="10"][data-type="2"][data-berries="true"],
	#game div[data-number="10"][data-type="2"][data-merged="4"]::before,
	#game div[data-number="10"][data-type="2"][data-merged="5"]::before,
	#game div[data-number="10"][data-type="2"][data-merged="6"]::before,
	#game div[data-number="10"][data-type="2"][data-merged="7"]::before,
	#game div[data-number="10"][data-type="2"][data-merged="8"]::before,
	#game div[data-number="10"][data-type="2"][data-merged="9"]::before{background: var(--tile-10a-img-berries); background-size: cover;}
@keyframes skyCastle {
	0% { transform: translateY(0); }
	50% { transform: translateY(-10%); }
	100% { transform: translateY(0); }
}

#game div[data-number="40"]::before{background: var(--tile-dead01-img); background-size: cover;}
#game div[data-number="40"][data-type="2"]::before{background: var(--tile-ruins01-img); background-size: cover;}
#game div[data-number="41"]::before{background: var(--tile-dead02-img); background-size: cover;}
#game div[data-number="41"][data-type="2"]::before{background: var(--tile-ruins02-img); background-size: cover;}
#game div[data-number="42"]::before{background: var(--tile-dead03-img); background-size: cover;}
#game div[data-number="42"][data-type="2"]::before{background: var(--tile-ruins03-img); background-size: cover;}
#game div[data-number="55"]::before{background: var(--tile-55-img); background-size: cover;}
#game div[data-number="56"]::before{background: var(--tile-56-img); background-size: 85%;}
#game div[data-number="57"]::before{background: var(--tile-diamond03-img); background-size: cover;}
#game div[data-number="70"]::before{background: var(--tile-diamond-img); background-size: cover;}
#game div[data-number="71"]::before{background: var(--tile-diamond02-img); background-size: cover;}
#game div[data-number="72"]::before{background: var(--tile-diamond03-img); background-size: cover;}
#game div[data-number="97"]::before{background: var(--tile-relocator-img); background-size: cover;}
#game div[data-number="99"]::before{background: var(--tile-delete-img); background-size: cover;}
#game div[data-number="100"]{}
#game div[data-number="100"]::before{display: none;}
/* Map: Central Lake */
#game[data-gridmode="centrallake"]::after {display: block; content: ' '; pointer-events: none; width: 100%; height: 100%; background: var(--tile-lake-01); position: absolute; top: 0; left: 0;  background-size: 2000% 100%; background-position-x: 0; animation: animCentralLake 2s steps(19) 0s infinite; transform: translate(0, 0);}
@keyframes animCentralLake {0% { background-position-x: 0%;} 100% { background-position-x: 100%; }}
/* Map: Winding River */
#game[data-gridmode="windingriver"]::after { display: block; content: ' '; pointer-events: none; width: 100%; height: 100%; top: 0%; left: 0%; background: var(--tile-windingriver-01); position: absolute;  background-size: 2600% 100%; background-position-x: 0; animation: animWindingRiver 3s steps(25) 0s infinite; transform: translate(0, 0); }
@keyframes animWindingRiver { 0% { background-position-x: 0%; } 100% { background-position-x: 100%; } }
/* Map: Tropical Island */
#game[data-gridmode="tropicalisland"]::after {display: block; content: ' '; pointer-events: none; width: 100%; height: 100%; background: var(--tile-tropicalisland-01); position: absolute; top: 0; left: 0;  background-size: 2000% 100%; background-position-x: 0; animation: animTropicalIsland 2s steps(19) 0s infinite; transform: translate(0, 0);}
@keyframes animTropicalIsland {0% { background-position-x: 0%;} 100% { background-position-x: 100%; }}
/* Map: The Fort */
#game[data-gridmode="thefort"]::after {display: block; content: ' '; pointer-events: none; width: 100%; height: 100%; background: var(--tile-thefort-01); position: absolute; top: 0; left: 0;  background-size: 2000% 100%; background-position-x: 0; animation: animTropicalIsland 2s steps(19) 0s infinite; transform: translate(0, 0);}
@keyframes animTropicalIsland {0% { background-position-x: 0%;} 100% { background-position-x: 100%; }}
/* Map: The Fort */
#game[data-gridmode="crumblingcamelot"]::after {display: block; content: ' '; pointer-events: none; width: 100%; height: 100%; background: var(--tile-crumblingcamelot-01); position: absolute; top: 0; left: 0;  background-size: 2000% 100%; background-position-x: 0; animation: animCentralLake 2s steps(19) 0s infinite; transform: translate(0, 0);}
@keyframes animCrumblingCamelot {0% { background-position-x: 0%;} 100% { background-position-x: 100%; }}

#game[data-gridmode="mountaintop"]::after {display: block; content: ' '; pointer-events: none; width: 100%; height: 200%; background: var(--tile-mountaintop-01); position: absolute; bottom: 0; left: 0; background-size: contain; background-position: bottom left;}
#game-container[data-gridmode="mountaintop"] #sky img,
	#game-container[data-gridmode="mountaintop"] #sky .sky-grass,
	#game-container[data-gridmode="mountaintop"] #sky .sky-cliffs-overlay{opacity: 0 !important;}
#game-container[data-gridmode="mountaintop"] #sky .sky-gradient{height: 100% !important;}
#game-container[data-gridmode="mountaintop"] .game-board-cloud-01{display: block; left: 15%; animation: animHomeLogoCloud01 62s ease-in-out 0s infinite;}
#game-container[data-gridmode="mountaintop"] .game-board-cloud-02{display: block;  left: 70%; bottom: 22px; animation: animHomeLogoCloud02 62s ease-in-out 0s infinite;}

#game-container .game-board-cloud-01,
	#game-container .game-board-cloud-02{display: none; position: absolute; z-index: 3; opacity: 0.6; bottom: 10px; width: 200px; max-width: 28%; user-select: none; pointer-events: none; overflow: hidden;}

#game div .anim-tile {display: block; user-select: none; pointer-events: none; width: 40%; aspect-ratio: 1/1; position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden; background-size: 600% 100%; background-repeat: no-repeat; background-position: 0% 0%; }
#game div[data-number="1"] .anim-tile{}
#game div[data-number="2"] .anim-tile {background-image: url('../img/sprite-fox-pop.svg'); background-size: 900% 100%; width: 100%; aspect-ratio: 2/3; bottom: 0; left: 0; top: unset; z-index: 0;
  animation:
    fox-pop-sprite 1s steps(1) 0s forwards;
}
#game div[data-number="3"][data-type="1"] .anim-tile {top: -13%; left: 48%; background-image: url('../img/sprite-bird.svg'); transform: translate(-100vw, -30vh);
  animation:
    bird-flight 6.5s ease-in-out 0.5s forwards,
    bird-sprite 6.5s steps(1) 0.5s forwards;
}
#game div[data-number="4"][data-type="1"] .anim-tile {top: -55%; left: 41%; background-image: url('../img/sprite-bird.svg'); transform: translate(100vw, -30vh);
  animation:
    bird-flight-flipped 6.5s ease-in-out 0.5s forwards,
    bird-sprite-flipped 6.5s steps(1) 0.5s forwards;
}
#game div[data-number="3"][data-type="2"] .anim-tile {top: -13%; left: 48%; background-image: url('../img/sprite-bird2.svg'); transform: translate(-100vw, -30vh);
  animation:
    bird-flight 6.5s ease-in-out 0.5s forwards,
    bird-sprite 6.5s steps(1) 0.5s forwards;
}
#game div[data-number="4"][data-type="2"] .anim-tile {top: -55%; left: 41%; background-image: url('../img/sprite-bird2.svg'); transform: translate(100vw, -30vh);
  animation:
    bird-flight-flipped 6.5s ease-in-out 0.5s forwards,
    bird-sprite-flipped 6.5s steps(1) 0.5s forwards;
}
/* 05: Chimney */
#game div[data-number="5"][data-type="1"] .anim-tile{background-image: url('../img/sprite-chimney-03.svg'); background-size: 3200% 100%; transform: translate(-50%, 0); width: 120%; aspect-ratio: 2/3; top: unset; bottom: 110%; left: 30%; opacity: 0.8;
	animation: sprite-chimney-03 4s steps(31) 0s forwards;
}
/* 05a: Knight */
#game div[data-number="5"][data-type="2"][data-anim="2"] .anim-tile {background-image: url('../img/sprite-05a06a07a08a-alt01.svg'); background-size: 2000% 100%; width: 100%; aspect-ratio: 2/3; top: unset; bottom: 0%; left: 0%;
	animation: sprite-linear 2s steps(19) 0s forwards;
}
/* 05a: Flags */
#game div[data-number="5"][data-type="2"] .anim-tile {background-image: url('../img/sprite-05a06a07a08a.svg'); background-size: 3200% 100%; width: 100%; aspect-ratio: 2/3; top: unset; bottom: 0%; left: 0%;
	animation: sprite-flag-01 4s steps(31) 0s forwards;
}
#game div[data-number="5"][data-type="2"][data-berries="true"] .anim-tile,
	#game div[data-number="5"][data-type="2"][data-merged="4"] .anim-tile,
	#game div[data-number="5"][data-type="2"][data-merged="5"] .anim-tile,
	#game div[data-number="5"][data-type="2"][data-merged="6"] .anim-tile,
	#game div[data-number="5"][data-type="2"][data-merged="7"] .anim-tile,
	#game div[data-number="5"][data-type="2"][data-merged="8"] .anim-tile,
	#game div[data-number="5"][data-type="2"][data-merged="9"] .anim-tile{background-image: url('../img/sprite-05a06a07a08a-plus.svg');}
/* 06: Character */
#game div[data-number="6"][data-type="1"] .anim-tile {background-image: url('../img/sprite-06-01.svg'); background-size: 700% 100%; transform: translate(0, 0); width: 100%; aspect-ratio: 2/3; top: unset; bottom: 0%; left: 0%;
  animation: spriteChar01 3s steps(1) 0.5s forwards;
}
/* 06: Chimney */
#game div[data-number="6"] .anim-tile[data-anim="2"] {background-image: url('../img/sprite-chimney-03.svg'); background-size: 3200% 100%; transform: translate(-50%, 0); width: 120%; aspect-ratio: 2/3; top: unset; bottom: 110%; left: 30%; opacity: 0.8;
	animation: sprite-chimney-03 4s steps(31) 0s forwards;
}
/* 06a: Flags */
#game div[data-number="6"][data-type="2"] .anim-tile {background-image: url('../img/sprite-05a06a07a08a.svg'); transform: translateY(-5%); background-size: 3200% 100%; width: 100%; aspect-ratio: 2/3; top: unset; bottom: 0%; left: 0%;
	animation: sprite-flag-01 4s steps(31) 0s forwards;
}
#game div[data-number="6"][data-type="2"][data-berries="true"] .anim-tile,
	#game div[data-number="6"][data-type="2"][data-merged="4"] .anim-tile,
	#game div[data-number="6"][data-type="2"][data-merged="5"] .anim-tile,
	#game div[data-number="6"][data-type="2"][data-merged="6"] .anim-tile,
	#game div[data-number="6"][data-type="2"][data-merged="7"] .anim-tile,
	#game div[data-number="6"][data-type="2"][data-merged="8"] .anim-tile,
	#game div[data-number="6"][data-type="2"][data-merged="9"] .anim-tile{background-image: url('../img/sprite-05a06a07a08a-plus.svg');}
/* 07: Lights on/off */
#game div[data-number="7"][data-type="1"] .anim-tile {background-image: url('../img/sprite-07-01.svg');background-size: 2000% 100%; background-position-x: 0; transform: translate(0, 0); width: 100%; aspect-ratio: 2/3; top: unset; bottom: 0%; left: 0%;
  animation: sprite20frame 3s steps(19) 0.5s forwards;
}
/* 07: Chimney */
#game div[data-number="7"] .anim-tile[data-anim="2"] {background-image: url('../img/sprite-chimney-03.svg'); background-size: 3200% 100%; transform: translate(-50%, 0); width: 120%; aspect-ratio: 2/3; top: unset; bottom: 110%; left: 30%; opacity: 0.8;
	animation: sprite-chimney-03 4s steps(31) 0s forwards;
}
/* 07a: Flags */
#game div[data-number="7"][data-type="2"] .anim-tile {background-image: url('../img/sprite-05a06a07a08a.svg'); transform: translateY(-5%); background-size: 3200% 100%; width: 100%; aspect-ratio: 2/3; top: unset; bottom: 0%; left: 0%;
	animation: sprite-flag-01 4s steps(31) 0s forwards;
}
#game div[data-number="7"][data-type="2"][data-berries="true"] .anim-tile,
	#game div[data-number="7"][data-type="2"][data-merged="4"] .anim-tile,
	#game div[data-number="7"][data-type="2"][data-merged="5"] .anim-tile,
	#game div[data-number="7"][data-type="2"][data-merged="6"] .anim-tile,
	#game div[data-number="7"][data-type="2"][data-merged="7"] .anim-tile,
	#game div[data-number="7"][data-type="2"][data-merged="8"] .anim-tile,
	#game div[data-number="7"][data-type="2"][data-merged="9"] .anim-tile{background-image: url('../img/sprite-05a06a07a08a-plus.svg');}
/* 08: Character */
#game div[data-number="8"][data-type="1"] .anim-tile {background-image: url('../img/sprite-08-01.svg'); background-size: 700% 100%; transform: translate(0, 0); width: 100%; aspect-ratio: 2/3; top: unset; bottom: 0%; left: 0%;
  animation: spriteChar01 3s steps(1) 0.5s forwards;
}
/* 08: Chimney */
#game div[data-number="8"][data-type="1"] .anim-tile[data-anim="2"] {background-image: url('../img/sprite-chimney-03.svg'); background-size: 3200% 100%; transform: translate(-50%, 0); width: 120%; aspect-ratio: 2/3; top: unset; bottom: 110%; left: 30%; opacity: 0.8;
	animation: sprite-chimney-03 4s steps(31) 0s forwards;
}
/* 08: Lights on/off */
/*
#game div[data-number="8"][data-type="1"] .anim-tile[data-anim="3"] {background-image: url('../img/sprite-09-01.svg');background-size: 2000% 100%; background-position-x: 0; transform: translate(0, 0); width: 100%; aspect-ratio: 2/3; top: unset; bottom: 0%; left: 0%;
  animation: sprite20frame 3s steps(19) 0.5s forwards;
}*/
/* 08a: Flags */
#game div[data-number="8"][data-type="2"] .anim-tile {background-image: url('../img/sprite-05a06a07a08a.svg'); transform: translateY(-10%); background-size: 3200% 100%; width: 100%; aspect-ratio: 2/3; top: unset; bottom: 0%; left: 0%;
	animation: sprite-flag-01 4s steps(31) 0s forwards;
}
#game div[data-number="8"][data-type="2"][data-berries="true"] .anim-tile,
	#game div[data-number="8"][data-type="2"][data-merged="4"] .anim-tile,
	#game div[data-number="8"][data-type="2"][data-merged="5"] .anim-tile,
	#game div[data-number="8"][data-type="2"][data-merged="6"] .anim-tile,
	#game div[data-number="8"][data-type="2"][data-merged="7"] .anim-tile,
	#game div[data-number="8"][data-type="2"][data-merged="8"] .anim-tile,
	#game div[data-number="8"][data-type="2"][data-merged="9"] .anim-tile{background-image: url('../img/sprite-05a06a07a08a-plus.svg');}
/* 09: Lights on/off */
#game div[data-number="9"][data-type="1"] .anim-tile {background-image: url('../img/sprite-09-01.svg');background-size: 2000% 100%; background-position-x: 0; transform: translate(0, 0); width: 100%; aspect-ratio: 2/3; top: unset; bottom: 0%; left: 0%;
  animation: sprite20frame 3s steps(19) 0.5s forwards;
}
/* 09: Chimney */
#game div[data-number="9"] .anim-tile[data-anim="2"]{background-image: url('../img/sprite-chimney-03.svg'); background-size: 3200% 100%; transform: translate(-50%, 0); width: 120%; aspect-ratio: 2/3; top: unset; bottom: 110%; left: 30%; opacity: 0.8;
	animation: sprite-chimney-03 4s steps(31) 0s forwards;
}
/* 09a: Flags */
#game div[data-number="9"][data-type="2"] .anim-tile {background-image: url('../img/sprite-09a.svg'); transform: translateY(0%); background-size: 3200% 100%; width: 100%; aspect-ratio: 2/3; top: unset; bottom: 0%; left: 0%;
	animation: sprite-flag-01 4s steps(31) 0s forwards;
}
#game div[data-number="9"][data-type="2"][data-berries="true"] .anim-tile,
	#game div[data-number="9"][data-type="2"][data-merged="4"] .anim-tile,
	#game div[data-number="9"][data-type="2"][data-merged="5"] .anim-tile,
	#game div[data-number="9"][data-type="2"][data-merged="6"] .anim-tile,
	#game div[data-number="9"][data-type="2"][data-merged="7"] .anim-tile,
	#game div[data-number="9"][data-type="2"][data-merged="8"] .anim-tile,
	#game div[data-number="9"][data-type="2"][data-merged="9"] .anim-tile{background-image: url('../img/sprite-09plus.svg');}

#game div[data-number="40"] .anim-tile {top: -22%; left: 20%; background-image: url('../img/sprite-bird3.svg'); transform: translate(-100vw, -30vh);
  animation:
    bird-flight 6.5s ease-in-out 0.5s forwards,
    bird-sprite 6.5s steps(1) 0.5s forwards;
}
#game div[data-number="41"] .anim-tile {top: -46%; left: 36%; background-image: url('../img/sprite-bird3.svg'); transform: translate(100vw, -30vh);
  animation:
    bird-flight-flipped 6.5s ease-in-out 0.5s forwards,
    bird-sprite-flipped 6.5s steps(1) 0.5s forwards;
}

/* Fox Popup Animation */
@keyframes fox-pop-sprite { 0% { background-position: 0% 0%; } 12.5% { background-position: 12.5% 0%; } 25% { background-position: 25% 0%; } 37.5% { background-position: 37.5% 0%; } 50% { background-position: 50% 0%; } 62.5% { background-position: 62.5% 0%; } 75% { background-position: 75% 0%; } 87.5% { background-position: 87.5% 0%; } 100% { background-position: 100% 0%; } }

/* Base flight animation */
@keyframes bird-flight { 0% { transform: translate(-100vw, -20vh); } 17.39% { transform: translate(0, 0); } 82.61% { transform: translate(0, 0); } 100% { transform: translate(100vw, -20vh); } }
@keyframes bird-flight-flipped { 0% { transform: translate(100vw, -20vh) scaleX(-1); } 17.39% { transform: translate(0, 0) scaleX(-1); } 82.61% { transform: translate(0, 0) scaleX(-1); } 100% { transform: translate(-100vw, -20vh) scaleX(-1); } }

/* Base sprite animation */
@keyframes bird-sprite { 0% { background-position: 0% 0%; } 1.74% { background-position: 20% 0%; } 3.48% { background-position: 40% 0%; } 5.22% { background-position: 60% 0%; } 6.96% { background-position: 80% 0%; } 8.70% { background-position: 0% 0%; } 10.44% { background-position: 20% 0%; } 12.18% { background-position: 40% 0%; } 13.92% { background-position: 60% 0%; } 15.66% { background-position: 80% 0%; } 17.39% { background-position: 0% 0%; } 17.4% { background-position: 100% 0%; } 82.6% { background-position: 100% 0%; } 82.61% { background-position: 0% 0%; } 84.35% { background-position: 20% 0%; } 86.09% { background-position: 40% 0%; } 87.83% { background-position: 60% 0%; } 89.57% { background-position: 80% 0%; } 91.31% { background-position: 0% 0%; } 93.05% { background-position: 20% 0%; } 94.79% { background-position: 40% 0%; } 96.53% { background-position: 60% 0%; } 98.27% { background-position: 80% 0%; } 100% { background-position: 0% 0%; opacity: 0; } }
@keyframes bird-sprite-flipped { 0% { background-position: 0% 0%; } 1.74% { background-position: 20% 0%; } 3.48% { background-position: 40% 0%; } 5.22% { background-position: 60% 0%; } 6.96% { background-position: 80% 0%; } 8.70% { background-position: 0% 0%; } 10.44% { background-position: 20% 0%; } 12.18% { background-position: 40% 0%; } 13.92% { background-position: 60% 0%; } 15.66% { background-position: 80% 0%; } 17.39% { background-position: 0% 0%; } 17.4% { background-position: 100% 0%; } 82.6% { background-position: 100% 0%; } 82.61% { background-position: 0% 0%; } 84.35% { background-position: 20% 0%; } 86.09% { background-position: 40% 0%; } 87.83% { background-position: 60% 0%; } 89.57% { background-position: 80% 0%; } 91.31% { background-position: 0% 0%; } 93.05% { background-position: 20% 0%; } 94.79% { background-position: 40% 0%; } 96.53% { background-position: 60% 0%; } 98.27% { background-position: 80% 0%; } 100% { background-position: 0% 0%; } }

/* Anim Stone 05: Flag Waving */
@keyframes stone-05 { 0% { background-position-x: 0%; } 100% { background-position-x: 100%; } }

@keyframes sprite20frame {0% { background-position-x: 0%;} 100% { background-position-x: 100%; }}

/* Anim Wood 07: Character Waving */
@keyframes spriteChar01 {  0% { background-position: 0% 0%; } 2.5% { background-position: 16.67% 0%; } /* Frame 2 */ 5% { background-position: 33.33% 0%; }   /* Frame 3 */ 7.5% { background-position: 50% 0%; }    /* Frame 4 */ 10% { background-position: 66.67% 0%; }  /* Frame 5 */ 12.5% { background-position: 66.67% 0%; } /* Hold frame 5 */ /* Phase 2: Waving 8 times (frames 6-7) - 4 seconds */ /* Wave 1 */ 15% { background-position: 83.33% 0%; }  /* Frame 6 */ 17.5% { background-position: 100% 0%; }  /* Frame 7 */ /* Wave 2 */ 20% { background-position: 83.33% 0%; }  /* Frame 6 */ 22.5% { background-position: 100% 0%; }  /* Frame 7 */ /* Wave 3 */ 25% { background-position: 83.33% 0%; }  /* Frame 6 */ 27.5% { background-position: 100% 0%; }  /* Frame 7 */ /* Wave 4 */ 30% { background-position: 83.33% 0%; }  /* Frame 6 */ 32.5% { background-position: 100% 0%; }  /* Frame 7 */ /* Wave 5 */ 35% { background-position: 83.33% 0%; }  /* Frame 6 */ 37.5% { background-position: 100% 0%; }  /* Frame 7 */ /* Wave 6 */ 40% { background-position: 83.33% 0%; }  /* Frame 6 */ 42.5% { background-position: 100% 0%; }  /* Frame 7 */ /* Wave 7 */ 45% { background-position: 83.33% 0%; }  /* Frame 6 */ 47.5% { background-position: 100% 0%; }  /* Frame 7 */ /* Wave 8 */ 50% { background-position: 83.33% 0%; }  /* Frame 6 */ 52.5% { background-position: 100% 0%; }  /* Frame 7 */ /* Brief pause */ 55% { background-position: 83.33% 0%; }  /* Frame 6 */ 62.5% { background-position: 83.33% 0%; } /* Hold frame 6 */ /* Phase 3: Walking back (frames 5-1) - 1 second */ 65% { background-position: 66.67% 0%; }  /* Frame 5 */ 67.5% { background-position: 50% 0%; }    /* Frame 4 */ 70% { background-position: 33.33% 0%; }   /* Frame 3 */ 72.5% { background-position: 16.67% 0%; } /* Frame 2 */ 75% { background-position: 0% 0%; }      /* Frame 1 */ /* Hold final frame */ 100% { background-position: 0% 0%; }}

@keyframes  { 0% { background-position: 0% 0%; opacity: 0.6; } 3.7% { background-position: 11.11% 0%; } 7.4% { background-position: 22.22% 0%; } 11.1% { background-position: 33.33% 0%; } 14.8% { background-position: 44.44% 0%; } 18.5% { background-position: 55.55% 0%; } 22.2% { background-position: 66.66% 0%; } 25.9% { background-position: 77.77% 0%; } 29.6% { background-position: 88.88% 0%; } 33.33% { background-position: 100% 0%; } 37.03% { background-position: 0% 0%; } 40.73% { background-position: 11.11% 0%; } 44.43% { background-position: 22.22% 0%; } 48.13% { background-position: 33.33% 0%; } 51.83% { background-position: 44.44% 0%; } 55.53% { background-position: 55.55% 0%; } 59.23% { background-position: 66.66% 0%; } 62.93% { background-position: 77.77% 0%; } 66.63% { background-position: 88.88% 0%; } 66.66% { background-position: 100% 0%; } 70.36% { background-position: 0% 0%; } 74.06% { background-position: 11.11% 0%; } 77.76% { background-position: 22.22% 0%; } 81.46% { background-position: 33.33% 0%; } 85.16% { background-position: 44.44% 0%; } 88.86% { background-position: 55.55% 0%; } 92.56% { background-position: 66.66% 0%; } 96.26% { background-position: 77.77% 0%; } 99.96% { background-position: 88.88% 0%; } 99% { background-position: 100% 0%; opacity: 1; } 100% { background-position: 100% 0%; opacity: 0; } }
@keyframes sprite-chimney-02 { 0% { background-position: 0% 0%; opacity: 0.8; } 6.25% { background-position: 6.67% 0%; } 12.5% { background-position: 13.33% 0%; } 18.75% { background-position: 20% 0%; } 25% { background-position: 26.67% 0%; } 31.25% { background-position: 33.33% 0%; } 37.5% { background-position: 40% 0%; } 43.75% { background-position: 46.67% 0%; } 50% { background-position: 53.33% 0%; } 56.25% { background-position: 60% 0%; } 62.5% { background-position: 66.67% 0%; } 68.75% { background-position: 73.33% 0%; } 75% { background-position: 80% 0%; } 81.25% { background-position: 86.67% 0%; } 87.5% { background-position: 93.33% 0%; } 93.75% { background-position: 100% 0%; } 99% { background-position: 100% 0%; opacity: 0.8; } 100% { background-position: 100% 0%; opacity: 0; } }
@keyframes sprite-chimney-03 { 0% { background-position: 0% 0%; opacity: 0;} 5% { opacity: 1; } 95% {opacity: 1;}  100% { background-position: 100% 0%; opacity: 0;} }
@keyframes sprite-flag-01 { 0% { background-position: 0% 0%; opacity: 0;} 5% { opacity: 1; } 95% {opacity: 1;}  100% { background-position: 100% 0%; opacity: 0;} }
@keyframes sprite-linear {0% { background-position-x: 0%;} 100% { background-position-x: 100%; }}

#game div.latest {/*background: #bbb;*/}
#game div.relocator-selected{animation: animRelocatorPulse 0.8s ease-in-out 0s infinite;}
#game div.lightening{}
#game-board-container .lightening-anim-flash{display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 8; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%); animation: animLighteningFlash 0.75s linear 2; opacity: 0;}
#game-board-container .lightening-anim-dark{display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0,0,0,0.7); animation: animLighteningDark 1s linear forwards; opacity: 0;}
#game div .lightening-anim-bolt{display: block; position: absolute; z-index: 5; width: 100%; height: 500%; border-radius: 0;	background: url(../img/lightening-strike.svg) bottom left; background-size: 500% auto; overflow: hidden; animation: animLightening 0.75s steps(4) infinite; top: auto; opacity: 1; left: 0; bottom: 0; transform: none;	}
#game div .lightening-anim-circle{display: block; position: absolute; z-index: 0; width: 100%; height: 50%; border-radius: 50%;	background: #fff; overflow: hidden; top: auto; opacity: 1; left: 0; bottom: 0; transform: none;animation: animLighteningCircle 3s linear forwards; opacity: 0;}
#game div .whirlwind-anim-sprite{display: block; position: absolute; z-index: 5; width: 100%; aspect-ratio: 82.047 / 131.03; top: unset; bottom: 0; left: 0; background-image: url(../img/sprite-whirlwind-01.svg); background-size: 1700% 100%; background-repeat: no-repeat; background-position-x: 0; animation: animWhirlwind 1.2s steps(16) 0s forwards; transform: scale(3); transform-origin: center bottom;}
/* Tile ::before gets torn upward/away by the whirlwind before the tile (data-number) is cleared.
   Runs 0-450ms; JS removes the tile attributes at 500ms, right as this finishes. */
#game div.whirlwind-tearing::before{z-index: 6; animation: animWhirlwindTearUp 0.45s ease-in 0s 1 forwards !important;}
#game div.latest::after{animation: animLatestTileAfter 0.3s linear 0s forwards;}
#game div.latest::before{animation: animLatestIn 0.25s linear 0s forwards;}
#game div.adjacent::after {content: ' '; opacity: 1; display: block; width: calc(100% - 2px) !important; height: calc(100% - 2px) !important; animation: animAdjacent 0.75s ease-in 0s forwards; background: rgba(255,255,255,0.07) !important; z-index: 0; position: absolute; top: 1px !important; left: 1px !important; border-radius: 12px !important; transform: none !important; transition: none !important;}
#game div.merge::before{opacity: 1;}
#game div.mergedcell::before{opacity: 0;}
#game div.position-bottom::before{transform: scale(1) translateY(-75%); opacity: 0;} /* Tile: Animate Up */
#game div.position-top::before{transform: scale(1) translateY(75%); opacity: 0;} /* Tile: Animate Down */
#game div.position-right::before{transform: scale(1) translateX(-100%); opacity: 0;} /* Tile: Animate Left */
#game div.position-left::before{transform: scale(1) translateX(100%); opacity: 0;}  /* Tile: Animate Right */
#game div.position-top.position-right::before{transform: scale(1) translate(-100%, 75%); opacity: 0;} /* Tile: Animate Down & Left */
#game div.position-top.position-left::before{transform: scale(1) translate(100%, 75%); opacity: 0;} /* Tile: Animate Down & Right */
#game div.position-bottom.position-right::before{transform: scale(1) translate(-100%, -75%); opacity: 0;} /* Tile: Up & Left */
#game div.position-bottom.position-left::before{transform: scale(1) translate(100%, -75%); opacity: 0;} /* Tile: Animate Up & Right */
/*#game div.bear-og-pos::before{transition: translate 0.5s linear 0s !important;}*/
#game div.bear-new-pos-top::before{transform: translateY(-65%);} /* Bear: Animate Up */
#game div.bear-new-pos-bottom::before{transform: translateY(65%);} /* Bear: Animate Down */
#game div.bear-new-pos-left::before{transform: translateX(-100%);} /* Bear: Animate Left */
#game div.bear-new-pos-right::before{transform: translateX(100%);} /* BEar: Animate Right */
#game div.bear-anim{animation: animBearMove 0.5s ease-in-out 0s forwards;}

#game div.delete::before{animation: animDeleted 0.5s ease-in-out 0s forwards;}
#game div.direction-down::before{transform: scale(1) translateY(75%); opacity: 1; animation: animBearDown 0.5s ease-in-out 0s forwards;}
#game div.direction-left::before{transform: scale(1) translateX(100%); opacity: 1; animation: animBearLeft 0.5s ease-in-out 0s forwards;}
#game div.direction-right::before{transform: scale(1) translateX(-100%); opacity: 1; animation: animBearRight 0.5s ease-in-out 0s forwards;}
#game div.direction-up::before{transform: scale(1) translateY(-75%); opacity: 1; animation: animBearUp 0.5s ease-in-out 0s forwards;}
@-webkit-keyframes animDeleted {
	0% {transform: translateY(0) scale(1); opacity: 1}
	100% {transform: translateY(-75%) scale(0.5); opacity: 0}
}
@-webkit-keyframes animBearRight {
	0% {transform: translateX(-100%) scale(1); bottom: 0;}
	25% {bottom: -10px;}
	50% {bottom: 0;}
	75% {bottom: -10px;}
	100% {transform: translateX(0%) scale(1); opacity: 1; bottom: 0;}
}
@-webkit-keyframes animBearLeft {
	0% {transform: translateX(100%) scale(1); bottom: 0;}
	25% {bottom: -10px;}
	50% {bottom: 0;}
	75% {bottom: -10px;}
	100% {transform: translateX(0%) scale(1); opacity: 1; bottom: 0;}
}
@-webkit-keyframes animBearUp {
	0% {transform: translateY(75%) scale(1); bottom: 0;}
	25% {bottom: -10px;}
	50% {bottom: 0;}
	75% {bottom: -10px;}
	100% {transform: translateY(0%) scale(1); opacity: 1; bottom: 0;}
}
@-webkit-keyframes animBearDown {
	0% {transform: translateY(-75%)scale(1); bottom: 0;}
	25% {bottom: -10px;}
	50% {bottom: 0;}
	75% {bottom: -10px;}
	100% {transform: translateY(0%) scale(1); opacity: 1; bottom: 0;}
}

#game div.anim-coins::before{animation: animCoinsChest 1.3s ease-out 0s forwards;}
/*
#game div .add-chestlabel{
	display: block; width: auto; pointer-events: none; z-index: 9; height: auto; text-align: center; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); overflow: visible; padding: 1px; box-sizing: border-box; animation: animAddScore 2s ease-out 0s forwards; transform-origin: center;
	font-size: 35px;
	font-weight: bold;
	-webkit-text-stroke: 2px white;
	-webkit-text-fill-color: var(--game-color-orange);
}
#game div .add-score{
	display: block; width: auto; pointer-events: none; z-index: 9; height: auto; text-align: center; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); overflow: visible; padding: 1px; box-sizing: border-box; animation: animAddScore 1.5s ease-out 0s forwards; transform-origin: center;
	font-family: var(--game-font-02);
	font-size: 35px;
	font-weight: bold;
	-webkit-text-stroke: 2px white;
	-webkit-text-fill-color: var(--game-color-orange);
	text-shadow: 0px 5px 24px rgba(0,0,0,0.85);
}
#game div[data-type="1"] .add-score{-webkit-text-fill-color: var(--game-color-green01);}
#game div[data-type="2"] .add-score{-webkit-text-fill-color: #cbdbd3;}
*/

#game div .add-chestlabel{
	display: flex; flex-direction: row; flex-wrap: nowrap; width: auto; height: 45px; line-height: 45px; overflow: visible;
	word-break: keep-all; white-space: nowrap;
	pointer-events: none; z-index: 9; text-align: center;
	position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box;
	animation: animAddScore 2s ease-out 0s forwards; transform-origin: center;
	font-family: var(--game-font-02);
	font-size: 35px;
	font-weight: bold;
	background: var(--game-color-brownopaque);
	padding: 0;
	color: var(--game-color-darkbrown);
	backdrop-filter: blur(25px);
	border-radius: 10px;
	-webkit-text-stroke: 2px var(--game-color-lightyellow);
}
#game div .add-chestlabel .coins{display: block; padding: 0px 12px;}
#game div .add-chestlabel .icon{display: block; width: 40px; height: 40px; background: var(--tile-coins-img) no-repeat; background-size: 100%; overflow: hidden;}

#game div .add-score{
	display: flex; flex-direction: row; flex-wrap: nowrap; width: auto; height: 45px; line-height: 45px; overflow: visible;
	word-break: keep-all; white-space: nowrap;
	pointer-events: none; z-index: 9; text-align: center;
	position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box;
	animation: animAddScore 2s ease-out 0s forwards; transform-origin: center;
	font-family: var(--game-font-02);
	font-size: 35px;
	font-weight: bold;
	background: #000;
	padding: 0px;
	color: #fff;
	backdrop-filter: blur(25px);
	border-radius: 10px;
	-webkit-text-stroke: 2px white;
}
#game div .add-score .score{display: block; padding: 0px 12px;}
#game div .add-score .multiplier{display: block; width: auto; padding: 0px 12px; flex-wrap: nowrap; word-break: keep-all; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background:  var(--game-color-darkgreen); height: 45px; line-height: 45px; overflow: visible; color: var(--game-color-white); font-size: 20px; -webkit-text-stroke: 0;}
#game div[data-type="1"] .add-score{color: var(--game-color-darkgreen); background: var(--game-color-green01-opaque80); }
#game div[data-type="2"] .add-score{color: var(--game-color-darkgrey); background: var(--game-color-lightgrey-opaque80);}
#game div[data-type="2"] .add-score .multiplier{background:  var(--game-color-darkgrey); color: var(--game-color-white);}

#game div[data-number="55"] .add-score{-webkit-text-fill-color: var(--game-color-brown) !important;}
#game div[data-number="70"] .add-score,
	#game div[data-number="71"] .add-score{-webkit-text-fill-color: #0eb7fd !important;}

#game div .add-tilename{
	display: block; width: auto; pointer-events: none; z-index: 9; height: auto; text-align: center; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); overflow: visible; padding: 1px; box-sizing: border-box; animation: animAddTileName 1s ease-out 0s forwards; transform-origin: center;
	font-family: var(--game-font-02);
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
}
#game-menu-container{position: relative; z-index: 9;}

#score-levelup{display: flex; justify-content: space-between; align-items: center; transform: translateY(30px); opacity: 0; transition: all 0.5s cubic-bezier(.34,1.56,.64,1) 0s; user-select: none; pointer-events: none; width: 90%; height: auto; padding: 12px 20px; box-sizing: border-box; border-radius: 15px; z-index: 991; background-color: rgba(0,0,0,0.75); border: 2px solid var(--game-color-orange); box-shadow: 0px 19px 84px 0px rgba(0,0,0,0.85); position: absolute; bottom: 27px; left: 5%;}
#score-levelup.active{transform: translateY(0px); opacity: 1;  transition: all 0.75s cubic-bezier(.34,1.56,.64,1) 0s; }
#score-levelup p{padding: 2px 0;}
#score-levelup .levelup-icon{display: block; width: 20%;}
#score-levelup .levelup-info{display: block; width: 70%; text-align: left; font-size: 14px; color: var(--game-color-orange);}
#score-levelup .levelup-info .level-name{font-size: 26px; color: var(--game-color-white);}
.level-icon{display: block; width: 80px; height: 120px; background-size: contain; background-repeat: no-repeat; position: absolute; bottom: 0; right: 20px;}
.level-icon.icon-1{background-image: url(../img/level-01.svg);}
.level-icon.icon-2{background-image: url(../img/level-02.svg);}
.level-icon.icon-3{background-image: url(../img/level-03.svg);}
.level-icon.icon-4{background-image: url(../img/level-04.svg);}
.level-icon.icon-5{background-image: url(../img/level-05.svg);}
.level-icon.icon-6{background-image: url(../img/level-06.svg);}
.level-icon.icon-7{background-image: url(../img/level-07.svg);}
.level-icon.icon-8{background-image: url(../img/level-08.svg);}
.level-icon.icon-9{background-image: url(../img/level-09.svg);}
.level-icon.icon-10{background-image: url(../img/level-10.svg);}

#tile-option-container,
	.welcome-option-container{display: flex; align-items: center; justify-content: space-between; background-color: var(--game-color-darkgreen); padding: 20px 20px; margin: 0px auto; box-sizing: border-box; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none}
#tile-option-container::after,
	.welcome-option-container::after{content: ' '; display: block; width: 100%; height: 100%; z-index: 9; background: var(--game-color-darkgreen); opacity: 0.9; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in-out, visibility 0.2s ease-in-out; user-select: none;}
#tile-option-container.disabled::after{opacity: 0.9; visibility: visible;}
#tile-option-container .tile-description{display: block;}
#tile-option-container #bought-tile-message,
	#tile-option-container #relocate-tile-message{display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; color: var(--game-color-white); font-size: 20px; width: calc(100% - 40px); text-align: left;}
#tile-option-container #bought-tile-message.active,
	#tile-option-container #relocate-tile-message.active{display: flex; justify-content: space-between; align-items: center;}
#tile-option-container #bought-tile-message .tile-option,
	#tile-option-container #relocate-tile-message .tile-option{background: none;}
#tile-option-container #relocate-tile-message .tile-option[data-number="70"]::before{background: var(--tile-diamond-img); background-size: cover;}
.tile-option{display: block; width: 60px; height: 60px; box-sizing: border-box; border: 2px solid rgba(255,255,255,0); border-radius: 5px; margin: 0 5px; position: relative; background: var(--game-bg-01); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none}
.tile-option.active{border-color: var(--game-color-orange);;}
.tile-option.active::before{animation: animTileSelectActive 0.75s ease-in-out 0s infinite;}
.tile-option::before{content: ' '; display: block; width: 100%; height: auto; z-index: 1; transform-origin: center; aspect-ratio: 1/1.5; transition: nonw; transform: translate(0, 0); position: absolute; bottom: 0; left: 0; pointer-events: none;}
.tile-option[data-number="0"]::before{background: var(--tile-00-img); background-size: cover;}
.tile-option[data-number="1"]::before{background: var(--tile-01-img); background-size: cover;}
.tile-option[data-number="2"]::before{background: var(--tile-02-img); background-size: cover;}
.tile-option[data-number="3"]::before{background: var(--tile-03-img); background-size: cover;}
.tile-option[data-number="4"]::before{background: var(--tile-04-img); background-size: cover;}
.tile-option[data-number="5"]::before{background: var(--tile-05-img); background-size: cover;}
.tile-option[data-number="6"]::before{background: var(--tile-06-img); background-size: cover;}
.tile-option[data-number="7"]::before{background: var(--tile-07-img); background-size: cover;}
.tile-option[data-number="8"]::before{background: var(--tile-08-img); background-size: cover;}
.tile-option[data-number="9"]::before{background: var(--tile-09-img); background-size: cover;}
.tile-option[data-number="10"]::before{background: var(--tile-10-img); background-size: cover; animation: skyCastle 4s ease-in-out 0s infinite;}
.tile-option[data-number="x4"]::before{background: var(--tile-09-img); background-size: cover;}
.tile-option[data-number="x5"]::before{background: var(--tile-09-img); background-size: cover;}
.tile-option[data-number="x6"]::before{background: var(--tile-09-img); background-size: cover;}
.tile-option[data-number="1"][data-type="2"]::before{background: var(--tile-01a-img); background-size: cover;}
.tile-option[data-number="2"][data-type="2"]::before{background: var(--tile-02a-img); background-size: cover;}
.tile-option[data-number="3"][data-type="2"]::before{background: var(--tile-03a-img); background-size: cover;}
.tile-option[data-number="4"][data-type="2"]::before{background: var(--tile-04a-img); background-size: cover;}
.tile-option[data-number="5"][data-type="2"]::before{background: var(--tile-05a-img); background-size: cover;}
.tile-option[data-number="6"][data-type="2"]::before{background: var(--tile-06a-img); background-size: cover;}
.tile-option[data-number="7"][data-type="2"]::before{background: var(--tile-07a-img); background-size: cover;}
.tile-option[data-number="8"][data-type="2"]::before{background: var(--tile-08a-img); background-size: cover;}
.tile-option[data-number="9"][data-type="2"]::before{background: var(--tile-09a-img); background-size: cover;}
.tile-option[data-number="10"][data-type="2"]::before{background: var(--tile-10a-img); background-size: cover; animation: skyCastle 4s ease-in-out 0s infinite;}
.tile-option[data-number="x4"][data-type="2"]::before{background: var(--tile-09a-img); background-size: cover;}
.tile-option[data-number="x5"][data-type="2"]::before{background: var(--tile-09a-img); background-size: cover;}
.tile-option[data-number="x6"][data-type="2"]::before{background: var(--tile-09a-img); background-size: cover;}
.tile-option[data-number="55"]::before{background: var(--tile-55-img); background-size: cover;}
.tile-option[data-number="56"]::before{background: var(--tile-56-img); background-size: cover;}
.tile-option[data-number="40"]::before{background: var(--tile-dead01-img); background-size: cover;}
.tile-option[data-number="40"][data-type="2"]::before{background: var(--tile-ruins01-img); background-size: cover;}
.tile-option[data-number="41"]::before{background: var(--tile-dead02-img); background-size: cover;}
.tile-option[data-number="41"][data-type="2"]::before{background: var(--tile-ruins02-img); background-size: cover;}
.tile-option[data-number="42"]::before{background: var(--tile-dead03-img); background-size: cover;}
.tile-option[data-number="42"][data-type="2"]::before{background: var(--tile-ruins03-img); background-size: cover;}
.tile-option[data-number="70"]::before{background: var(--tile-diamondoption-img); background-size: cover;}
/*	.tile-option[data-number="70"][data-type="2"]::before{background: var(--tile-diamondoption-img); background-size: cover;}*/
.tile-option[data-number="71"]::before{background: var(--tile-diamond02-img); background-size: cover;}
.tile-option[data-number="72"]::before{background: var(--tile-diamond03-img); background-size: cover;}
.tile-option[data-number="97"]::before{background: var(--tile-relocator-img); background-size: cover;}
.tile-option[data-number="98"]::before{background: var(--tile-relocator-img); background-size: cover;}
.tile-option[data-number="99"]::before{background: var(--tile-delete-img); background-size: cover;}
.tile-option[data-number="100"]::before{background: var(--tile-undo-img); background-size: cover;}
.tile-option[data-number="101"]::before{background: var(--tile-score-img); background-size: cover;}
.tile-option-col{display: flex;}
#relocate-tile-message .tile-option[data-number="70"]::before{background: var(--tile-diamond-img); background-size: cover;}

#popup-formula{display: block; background: rgba(0,0,0,0.65); margin-top: -40px; padding: 12px; box-sizing: border-box; position: absolute; z-index: 991; color: var(--game-color-white); pointer-events: none; opacity: 0; margin-top: 0px; box-shadow: 0px 19px 84px 0px rgba(0,0,0,0.85); border-radius: 15px; box-sizing: border-box;;}
#popup-formula.type-1{border: 2px solid var(--game-color-midgreen);}
#popup-formula.type-2{border: 2px solid var(--game-color-midgrey);}
#popup-formula .tile-option{width: 40px; height: 35px; border: none; margin: 0; position: relative; background: none; transition: none;}
#popup-formula .tile-option::before{transform-origin: bottom; width: 40px; transform: translate(0, 0) scale(0.9); bottom: 3px; transition: none;}
#popup-formula .col-container{align-items: center;}
#popup-formula.active{display: block; pointer-events: all; opacity: 1; margin-top: -60px; transition: margin 0.25s ease-out 0s, opacity 0.5s ease-out 0s;}
#popup-formula.center-edge{transform: translateX(-60%);}
#popup-formula.left-edge{transform: translateX(10%);}
#popup-formula.right-edge{transform: translateX(-10%);}
#popup-formula .popup-formula-sum{ display: block; margin: 0 1px;}
#popup-formula .formula-label{display: none;}
#popup-formula.end-of-line .popup-formula-sum,
	#popup-formula.end-of-line .tile-option,
	#popup-formula.relocator .tile-option,
	#popup-formula.relocator .popup-formula-sum,
	#popup-formula.fox-formula .popup-formula-sum,
	#popup-formula.fox-formula .tile-option{display: none;}
#popup-formula.end-of-line #end-of-line{display: block;}
#popup-formula.fox-formula{border: 2px solid var(--game-color-midgrey);}
#popup-formula.fox-formula #fox-formula{display: block;}
#popup-formula.relocator{border: 2px solid var(--game-color-midgrey);}
#popup-formula.relocator #relocator{display: block;}

.btn-primary{display: inline-block; width: auto; line-height: normal; padding: 10px 20px; color: var(--game-color-white); background: var(--game-color-brown); margin: 0px auto; font-weight: 400; border-radius: 50px;}
.col-container{display: flex; width: 100%; align-items: flex-start; justify-content: space-between;}
.col-container.center{align-items: center; justify-content: center;}
.col-container.left{justify-content: flex-start;}
.illustration-svg{display: block; width: 100%; max-width: 100%;}
.hidden{display: none !important;}
.relative{position: relative;}
.text-center{text-align: center !important;}

.popup{display: block; visibility: hidden; pointer-events: none; opacity: 0; border: 0; color: #fff; width: 90vw; height: calc(90vh - 100px); max-width: var(--game-popup-max-width); max-height: var(--game-max-height); transform: translate(-50%, -50%) scale(0.7); overflow-y: scroll; overscroll-behavior-y: contain; background: var(--game-color-white); color: var(--game-color-black); text-align: left; box-shadow: 0px 19px 84px 0px rgba(0,0,0,0.85); position: fixed; top: 50%; left: 50%; z-index: 992; border-radius: 15px; padding: 20px 20px; box-sizing: border-box;}
.popup.small{aspect-ratio: 1/1.2; width: 90vw; height: auto;}
.popup.active{display: block; animation: animPopupIn 0.3s ease-out 0s forwards; pointer-events: auto; visibility: visible;}
.btn-tr.btn-popupclose{display: block; position: absolute; top: 10px; right: 0; z-index: 9; width: 60px; height: 60px; border-bottom-left-radius: 30px; background: url(../img/icon-close-brown-01.svg) center no-repeat transparent; background-size: 35%; padding: 0; text-indent: -9999px; overflow: hidden;}
.btn-tr.btn-popupclose:hover{}
.scores-totals .tile-option{width: 50px; height: 50px; margin: 0 10px 0 0; border: 0;}
.scores-totals .tile-option::before{left: 50%; transform: translate(-50%, 0%) !important; animation: none; width: 80%; height: auto; background-size: contain;}
#popup-modal,
	#popup-modal-game,
	#popup-modal-fixed{display: block; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease-out 0s; opacity: 0; border: 0; color: #fff; width: 100vw; height: 100vh; overflow: hidden; background: var(--game-color-darkgreen); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 980; box-sizing: border-box;}
#popup-modal.active,
	#popup-modal-game.active,
	#popup-modal-fixed.active{pointer-events: auto; visibility: visible; opacity: 0.8;}

#sub-menu{display: flex; width: auto; align-items: center; justify-content: space-between; margin-top: 20px; box-sizing: border-box; padding: 0 20px;}
.btn-sub-menu{display: flex; width: calc(50% - 5px); align-items: center; overflow: hidden; font-size: 30px; text-align: left; justify-content: space-between; padding: 16px 10px 15px 12px; margin: 0; text-decoration: none;box-sizing: border-box; position: relative; background: rgba(255,255,255,0.1); border-radius: 5px; color: #fff;}
.btn-sub-menu-col{display: flex; width: 50%;}
.btn-sub-menu-right{display: flex; width: 100%; align-items: center; justify-content: flex-end;}
.btn-sub-menu-icon{display: block; width: 55px; height: 55px; margin-left: 8px;}
.coins-icon{background: var(--tile-coins-img) no-repeat; background-size: 90%;}
.score-icon{background: var(--tile-score-img) no-repeat; background-size: cover;}
#score-total{color: var(--game-color-orange);}
.btn-sub-menu::after{content: ' '; display: block; width: 100%; height: 100%; z-index: 9; background: var(--game-color-darkgreen); opacity: 0.9; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in-out, visibility 0.2s ease-in-out; user-select: none;}
.btn-sub-menu.disabled::after{opacity: 0.9; visibility: visible;}
#btn-coins #coins-total{}
#coins-options{display: flex; width: 100%; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 16px;}
.btn-coin-select{}
.coins-label,
	.score-label{display: block; color: var(--game-color-black);}
.sub-label{font-size: 18px; line-height: 18px;}
.coins-price{display: block; font-size: 20px; color: var(--game-color-black);}
#coins-total{color: #f6e340;}
#btn-score{position: relative;}
#score-counters,
	#userglobalscores-counters{display: flex; width: 100%; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 16px; text-align: left; color: var(--game-color-black);}
.score-count-container{}
.score-counter{font-size: 20px;}
.level-progress{display: block; width: 100%; height: 3px; position: absolute; top: 0; left: 0; right: 0; z-index: 2;}
.level-progress-full{display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;}
.level-progress-full .level-progress-bar{height: 100%; background: rgba(255,255,255,0.075);}
.level-progress-bar{display: block; width: 0%; height: 3px; background: var(--game-color-brown); transition: all 0.3s ease-out 0s;}
#score-level-progress{display: flex; width: 100%; padding: 5px 15px; box-sizing: border-box; background: var(--game-color-greygrad); border-radius: 10px; overflow: visible; height: 80px; position: relative; margin-bottom: 10px;}
#score-level-progress p{margin: 0; padding: 0;}
#score-level-progress .level-progress-full .level-progress-bar{height: 100%; background: rgba(0,0,0,0.05);}
#score-level-progress .score-level-labelnum{font-size: 13px; line-height: 14px; padding-top: 2px;}
#score-level-progress-inner{display: flex; align-items: center; justify-content: space-between; width: 100%; }

.level-label-icon[data-levelicon="level1"]{background: url(../img/level-01.svg) center no-repeat; background-size: cover;}
.level-label-icon[data-levelicon="level2"]{background: url(../img/level-02.svg) center no-repeat; background-size: cover;}
.level-label-icon[data-levelicon="level3"]{background: url(../img/level-03.svg) center no-repeat; background-size: cover;}
.level-label-icon[data-levelicon="level4"]{background: url(../img/level-04.svg) center no-repeat; background-size: cover;}
.level-label-icon[data-levelicon="level5"]{background: url(../img/level-05.svg) center no-repeat; background-size: cover;}
.level-label-icon[data-levelicon="level6"]{background: url(../img/level-06.svg) center no-repeat; background-size: cover;}
.level-label-icon[data-levelicon="level7"]{background: url(../img/level-07.svg) center no-repeat; background-size: cover;}
.level-label-icon[data-levelicon="level8"]{background: url(../img/level-08.svg) center no-repeat; background-size: cover;}
.level-label-icon[data-levelicon="level9"]{background: url(../img/level-09.svg) center no-repeat; background-size: cover;}
.level-label-icon[data-levelicon="level10"]{background: url(../img/level-10.svg) center no-repeat; background-size: cover;}

.box-label-01{display: flex; width: calc(50% - 5px); align-items: center; justify-content: flex-start; line-height: 20px; padding: 0 10px 0 0; margin: 0 0 10px 0; border-radius: 10px; text-decoration: none;box-sizing: border-box; position: relative; background: var(--game-color-greygrad); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none;}
.box-label-01 .tile-option{border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.box-label-01.disabled,
	/*
	.box-label-01.disabled .coins-price,
	.box-label-01.disabled .coins-label,
	*/
	#game-container.disable-undo #btn-undo{opacity: 0.5; pointer-events: none;}

#gamemodes-container .gamemode-single{display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row-reverse; padding: 0px; box-sizing: border-box; margin: 0px; max-width: 100%;}
#gamemodes-container .gamemode-single.disabled{pointer-events: none; opacity: 0.5;}
#gamemodes-container .gamemode-single p{padding: 10px 0;}
#gamemodes-container .gamemode-overview{display: block; text-align: left; padding: 0; box-sizing: border-box; width: calc(100% - 100px);}
#gamemodes-container .gamemode-overview h2{display: block; text-align: left; padding-bottom: 10px;}
#gamemodes-container .play-btns{display: flex; justify-content: flex-start; align-items: flex-start; margin: 10px 15px 0 0;}
#gamemodes-container a{color: #fff; display: block; margin: 0 20px 0 0;}
#gamemodes-container .gamemode-icon{display: flex; width: 70px; min-width: 70px; height: 70px; min-height: 70px; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; margin-top: 15px; border-radius: 5px; overflow: hidden;}
#gamemodes-container .gamemode-icon[data-gamemode="grassland"]{background: var(--map-dots-grasslands) rgba(0,0,0,0.4); background-size: 90%;}
#gamemodes-container .gamemode-icon[data-gamemode="tropicalisland"]{background: var(--map-dots-tropicalisland) rgba(0,0,0,0.4); background-size: 90%;}
#gamemodes-container .gamemode-icon[data-gamemode="centrallake"]{background: var(--map-dots-centrallake) rgba(0,0,0,0.4); background-size: 90%;}
#gamemodes-container .gamemode-icon[data-gamemode="windingriver"]{background: var(--map-dots-windingriver) rgba(0,0,0,0.4); background-size: 90%;}
#gamemodes-container .gamemode-icon[data-gamemode="mountaintop"]{background: var(--map-dots-mountaintop) rgba(0,0,0,0.4); background-size: 90%;}
#gamemodes-container .gamemode-icon[data-gamemode="thefort"]{background: var(--map-dots-thefort) rgba(0,0,0,0.4); background-size: 90%;}
#gamemodes-container .gamemode-icon[data-gamemode="crumblingcamelot"]{background: var(--map-dots-crumblingcamelot) rgba(0,0,0,0.4); background-size: 90%;}
#gamemodes-container .gamemode-icon[data-gamemode="peacefulprairie"]{background: var(--map-dots-peacefulprairie) rgba(0,0,0,0.4); background-size: 90%;}
#gamemodes-container .gamemode-icon[data-gamemode="lavaflow"]{background: var(--map-dots-lavaflow) rgba(0,0,0,0.4); background-size: 90%;}
#gamemodes-container .gamemode-requirements{display: block; padding: 10px; background: rgba(0,0,0,0.4); border-radius: 50px; text-align: center; color: gold; border: 2px solid rgba(255,255,255,0.2);}
#gamemodes-container .enabled .gamemode-requirements{display: none;}
#gamemodes-container .disabled .play-btns{display: none;}

#high-scores{display: block; margin-top: 20px;}
.top-score-box{display: flex; align-items: flex-start; font-size: 16px; justify-content: space-between; flex-wrap: nowrap; max-width: var(--game-max-width); width: 100%; padding: 10px 5px; box-sizing: border-box; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.top-score-box .dix{display: block;}
.top-score-box .score-score,
	.top-score-box .score-player{display: flex; align-items: center; justify-content: flex-start; max-width: 50%; overflow: hidden; text-align: left; text-overflow: ellipsis;}
.top-score-box .score-status{display: block; width: 25px; height: 25px; overflow: hidden; text-indent: -9999px; margin-left: 8px;}
.top-score-box .score-status[data-status="inprogress"]{background: url(../img/icon-inprogress.svg) center no-repeat; background-size: cover;}
.top-score-box .score-status[data-status="complete"]{background: url(../img/icon-complete.svg) center no-repeat; background-size: cover;}
.top-score-box .score-place{display: block; margin-right: 5px;}
.top-score-box.loading{animation: animtopScoresLoader 1s ease-in-out 0s infinite; opacity: 0.5}

.icon-resend-complete{display: inline-block; width: 16px; margin-left: 4px; vertical-align: middle;}

.topscores-link-container{display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 25px 8px;}
.topscores-link-icon{display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #fff; border-radius: 8px; overflow: hidden;}
.topscores-link-icon img{display: block; width: 62%;}
.topscores-link-text{display: block; text-align: right; font-size: 15px; line-height: 1.2;}

.tutorial{}
.tutorial .content{}
.tutorial h2{border-top: 1px solid rgba(255,255,255,0.2); padding: 50px 0 0 0; margin-top: 40px;}
.tutorial-arrow{display: block; width: 30px; height: 50px; background: url(../img/down-arrow.svg) center no-repeat; background-size: contain; position: fixed; bottom: 32px; right: 20px; overflow: hidden; z-index: 999; animation: animTutorialArrow 1.2s ease-out 0s infinite; opacity: 0.5;}

#pwa-install{display: block; width: 94%; max-width: var(--game-max-width); box-sizing: border-box; padding: 10px; position: fixed; border-radius: 16px; font-weight: 600; color: #1a1c1e; background: #fff; border: 2px solid var(--game-color-brown); bottom: 12px; left: 50%; box-shadow: 0px 9px 16px 0px rgb(0 70 96 / 85%); z-index: 990; transform: translate(-50%, 150px); opacity: 0; animation: animPWAInstall 0.6s ease-out 3s forwards;}
.btn-pwa-install-close{width: 34px; height: 384x; background: url(../img/icon-close-brown-01.svg) center no-repeat; background-size: 75%; overflow: hidden; position: absolute; top: 12px; right: 8px; z-index: 3; text-indent: -9999px;}
.pwa-install-content{display: inline-block; width: calc(100% - 86px); vertical-align: middle;}
.pwa-install-content p{padding: 0;}
.pwa-install-content .small{font-size: 13px; opacity: 0.5; line-height: normal;}
.pwa-install-icon{display: inline-block; width: 70px; margin-right: 10px; vertical-align: middle;}
.pwa-install-icon img{width: 70px; height: 70px; border-radius: 10px; overflow: hidden;}

.screenshot-mode,
	.screenshot-mode *{cursor: none !important;}
.screenshot-mode #game{background: var(--game-bg-01); background-size: cover; border-radius: 0px;}
.screenshot-mode #game-container .content{padding-top: 0;}
.screenshot-mode #sky{height: 220px; border-radius: 0;}
.screenshot-mode .sky-gradient{border-radius: 0;}
.screenshot-mode #sky-menu{opacity: 0;}
.screenshot-mode #tile-option-container{justify-content: center; transform: translate(-107px, 10px) scale(1.1); margin-bottom: 20px;}
.screenshot-mode #tile-option-container .tile-description{display: block; width: 200px; text-align: right; padding: 0 10px; box-sizing: border-box;}
.screenshot-mode #game-board-container{border-radius: 30px 30px 50px 50px;; margin-top: 40px;}

/* MOBILE */
@media screen and (min-width: 420px) {
	#achievements-panels-nav a{width: 60px; height: 60px;}
	#achievements-panels-nav a .achievements-square{width: 56px;}
	#achievements-panels-nav a.active{width: calc(100% - 195px);}
	/*
	// SLIDER v1.2
	#highscores-panels-nav a{width: 60px; height: 60px;}
	#highscores-panels-nav a .highscores-square{width: 56px;}
	#highscores-panels-nav a.active{width: calc(100% - 260px);}
	*/
}

@media screen and (min-width: 650px) {
	#game-container .content{padding-top: 50px;}
	#game-board-container{}
	#game-board-wrapper{}
	#tile-option-container{padding: 25px 0;}
	#game{border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;}
	#game::after{border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; overflow: hidden;}
	#sky,
		.sky-gradient{border-top-left-radius: 40px; border-top-right-radius: 40px; overflow: hidden;}
	#sub-menu{padding: 0; margin-top: 10px;}
}

@media all and (display-mode: standalone) {
	#pwa-install{display: none !important;}
}
@-webkit-keyframes animPWAInstall {
	0% {transform: translate(-50%, 150px); opacity: 0;}
	80% {transform: translate(-50%, -10px); opacity: 1;}
	100% {transform: translate(-50%, 0px); opacity: 1;}
}

@-webkit-keyframes animRelocatorPulse {
	0% {opacity: 1;}
	50% {opacity: 0.5;}
	100% {opacity: 1;}
}

/* Dev Checks */
.dev-cellnum{display: block; position: absolute; top: 0; left: 0;}

@-webkit-keyframes animTutorialArrow {
	0% {transform: translateY(0%);}
	50% {transform: translateY(20%);}
	100% {transform: translateY(0%);}
}

/*
@media screen and (orientation: landscape) {

    #home-logo{display: block; max-width: 50vw; height: auto; margin-top: 50px;}
    #home-panel{text-align: left; padding: 5%; width: 50%;}
    #home-panel p{display: inline-block; margin: 0 20px 10px 0;}
    #home-menu a{margin: 0;}
    #home .content,
        #game-container .content{display: flex; flex-direction: row; align-items: center; width: 100vw; height: 100vh; max-width: none;}

	#popup-orientation{display: flex;}

    #game-board-wrapper{display: flex; width: 50%; height: 100vh;  min-height: 100vh; align-items: center; justify-content: center;}
    #game-board-container{width: 90vh; border-radius: 10px; overflow: hidden; border-radius: 30px; overflow: visible;}
    #game-board-wrapper #sky{display: none;}
    #game-menu-container{width: 50%;}

	#login-message{top: 50%; left: 50%; transform: translate(-100%, -50%); position: fixed;}
	#login-message-inner::before{transform: rotate(45deg) translate(0%, -50%); z-index: 0; top: 50%; right: 0; left: auto; bottom: auto;}

	#welcome-panels-inner .welcome-panel{display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 30px 30px;}
	#welcome-panels-inner .welcome-panel h1{text-align: left;}
	#welcome-panels-inner .welcome-panel .col{width: auto; text-align: left;}
	#welcome-panels-inner .welcome-grid-container{max-width: 220px;}
	#welcome-panels-inner .tile-option { width: 60px; height: 40px;}
	#btn-welcome-complete-container{position: absolute; bottom: 20px; left: 30px;}
	#btn-welcome-complete-container p{margin: 0; padding: 0;}

}

*/

@-webkit-keyframes welcomeCell {
	0% {opacity: 0;}
	40% {opacity: 1;}
	60% {opacity: 1;}
	100% {opacity: 0;}
}
@-webkit-keyframes welcomeSlideRight {
	0% {transform: translateX(0); opacity: 1;}
	100% {transform: translateX(-100%); opacity: 0;}
}
@-webkit-keyframes welcomeSlideLeft {
	0% {transform: translateX(0%); opacity: 1;}
	100% {transform: translateX(100%); opacity: 0;}
}
@-webkit-keyframes welcomeSlideDown {
	0% {transform: translateY(0%); opacity: 1;}
	100% {transform: translateY(100%); opacity: 0;}
}
@-webkit-keyframes welcomeSlideUp {
	0% {transform: translateY(0%); opacity: 1;}
	100% {transform: translateY(-100%); opacity: 0;}
}


@-webkit-keyframes animBearMove {
	0% {margin-top: 0;}
	25% {margin-top: -10px;}
	50% {margin-top: 0;}
	75% {margin-top: -10px;}
	100% {margin-top: 0;}
}

@-webkit-keyframes animTileUp {
	0% {transform: scale(1) translateY(0); opacity: 1;}
	100% {transform: scale(1) translateY(-75%); opacity: 0.25;}
}
@-webkit-keyframes animTileDown {
	0% {transform: scale(1) translateY(0); opacity: 1;}
	100% {transform: scale(1) translateY(75%); opacity: 0.25;}
}
@-webkit-keyframes animTileRight {
	0% {transform: scale(1) translateX(0); opacity: 1;}
	100% {transform: scale(1) translateX(100%); opacity: 0.25;}
}
@-webkit-keyframes animTileLeft {
	0% {transform: scale(1) translateX(0); opacity: 1;}
	100% {transform: scale(1) translateX(-100%); opacity: 0.25;}
}
@-webkit-keyframes animTileRightUp {
	0% {transform: scale(1) translateX(0) translateY(0); opacity: 1;}
	100% {transform: scale(1) translateX(100%) translateY(-75%); opacity: 0.25;}
}
@-webkit-keyframes animTileRightDown {
	0% {transform: scale(1) translateX(0) translateY(0); opacity: 1;}
	100% {transform: scale(1) translateX(100%) translateY(75%); opacity: 0.25;}
}
@-webkit-keyframes animTileLeftUp {
	0% {transform: scale(1) translateX(0) translateY(0); opacity: 1;}
	100% {transform: scale(1) translateX(-100%) translateY(-75%); opacity: 0.25;}
}
@-webkit-keyframes animTileLeftDown {
	0% {transform: scale(1) translateX(0) translateY(0); opacity: 1;}
	100% {transform: scale(1) translateX(-100%) translateY(75%); opacity: 0.25;}
}
.adjacent-left::before{animation: animTileRight 0.3s ease-out 0s forwards;}
.adjacent-right::before{animation: animTileLeft 0.3s ease-out 0s forwards;}
.adjacent-bottom::before{animation: animTileUp 0.3s ease-out 0s forwards;}
.adjacent-top::before{animation: animTileDown 0.3s ease-out 0s forwards;}
.adjacent-bottomRight::before{animation: animTileLeftUp 0.3s ease-out 0s forwards;}
.adjacent-bottomLeft::before{animation: animTileRightUp 0.3s ease-out 0s forwards;}
.adjacent-topRight::before{animation: animTileLeftDown 0.3s ease-out 0s forwards;}
.adjacent-topLeft::before{animation: animTileRightDown 0.3s ease-out 0s forwards;}

@-webkit-keyframes animLightening {
	0% {background-position: 0 0;}
	100% {background-position: -100% 0;}
}

@-webkit-keyframes animLighteningFlash {
	0% {opacity: 0;}
	1% {opacity: 1;}
	40% {opacity: 0;}
	50% {opacity: 0;}
	51% {opacity: 1;}
	100% {opacity: 0;}
}

@-webkit-keyframes animLighteningDark {
	0% {opacity: 0;}
	1% {opacity: 1;}
	100% {opacity: 0;}
}

@-webkit-keyframes animLighteningCircle {
	0% {opacity: 0;}
	1% {opacity: 1;}
	100% {opacity: 0;}
}

@-webkit-keyframes animWhirlwind {
	0% {background-position-x: 0%;}
	100% {background-position-x: 100%;}
}

@-webkit-keyframes animWhirlwindTearUp {
	0% {transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1;}
	20% {transform: scale(1.4);}
	60% {opacity: 1;}
	100% {transform: translate(12%, -170%) rotate(-40deg) scale(0.15); opacity: 0;}
}

@-webkit-keyframes animSunMoonParent {
	0% {transform: translateX(-50%) rotate(0deg);}
	100% {transform: translateX(-50%) rotate(360deg);}
}
@-webkit-keyframes animSunMoon {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

@-webkit-keyframes animtopScoresLoader {
	0% {opacity:0.5;}
	50% {opacity:0.2;}
	100% {opacity:0.5;}
}

@-webkit-keyframes animLoader {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@-webkit-keyframes animChequer {
	0% {opacity: 0.03;}
	40% {opacity: 0.06;}
	60% {opacity: 0.06;}
	100% {opacity: 0.03;}
}

@-webkit-keyframes skyColor {
	0% {background: rgba(34,152,204,1); /*linear-gradient(180deg, rgba(0,71,140,1) 0%, rgba(34,152,204,1) 100%);*/}
	30% {background: rgba(240,190,91,1); /*linear-gradient(180deg, rgba(191,109,58,1) 0%, rgba(240,190,91,1) 100%);*/}
	36% {background: rgba(240,190,91,1); /*linear-gradient(180deg, rgba(191,109,58,1) 0%, rgba(240,190,91,1) 100%);*/}
	60% {background: #bb8fb5;}
	66% {background: #bb8fb5;}
	100% {background: rgba(34,152,204,1);}
}


@-webkit-keyframes skyColorGradient {
	0% {transform: translateY(0);}
	100% {transform: translateY(-100%);}
}

/*
@-webkit-keyframes skyCliffColor {
	0% {fill: rgba(3,0,38,1);}
	7.1% {fill:rgba(59,20,125,1);}
	15% {fill: rgba(202,96,154,1);}
	41% {fill: rgba(247,174,92,1);}
	51% {fill: rgba(255,243,119,1);}
	61% {fill: rgba(226,255,237,1);}
	69% {fill: rgba(113,218,246,1);}
	79% {fill: rgba(36,160,220,1);}
	86% {fill: rgba(6,58,106,1);}
	93% {fill: rgba(3,0,38,1);}
	100% {fill: rgba(3,0,38,1);}
}
*/
@-webkit-keyframes skyCliffColor {
	0% {fill: rgba(3,0,38,1);}
	7.1% {fill: rgba(3,0,38,1);}
	15% {fill: rgba(6,58,106,1);}
	41% {fill: rgba(36,160,220,1);}
	51% {fill: rgba(113,218,246,1);}
	69% {fill: rgba(226,255,237,1);}
	51% {fill: rgba(255,243,119,1);}
	79% {fill: rgba(247,174,92,1);}
	86% {fill: rgba(202,96,154,1);}
	93% {fill:rgba(59,20,125,1);}
	100% {fill: rgba(3,0,38,1);}
}

@-webkit-keyframes animAddScore {
	0% {transform: translate(-50%, -50%);}
	100% {transform: translate(-50%, calc(-50% - 90px)); opacity: 0;}
}
@-webkit-keyframes animCoinsChest {
	0% {transform: translateY(0%, 0%); opacity: 1}
	100% {transform: translateY(calc(0% - 50px)); opacity: 0;}
}
@-webkit-keyframes animAdjacent {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-webkit-keyframes animLatestIn {
	0% {transform: translateY(calc(-50% - 30px)); opacity: 0;}
	100% {transform: translateY(0%); opacity: 1;}
}
@-webkit-keyframes animLatestTileAfter {
	0% {transform: translate(-50%, -50%) scale(0.5, 0.25); opacity: 0;}
	20% {opacity: 0.2;}
	100% {transform: translate(-50%, -50%) scale(4, 2); opacity: 0;}
}
@-webkit-keyframes animAddTileName {
	0% {transform: translate(-50%, 0%);}
	100% {transform: translate(-50%, 300%); opacity: 0;}
}
@-webkit-keyframes animPopupIn {
  0% {opacity: 0; transform: translate(-50%, -50%) scale(0.7);}
  80% {opacity: 1; transform: translate(-50%, -50%) scale(1.1);}
	100% {opacity: 1; transform: translate(-50%, -50%) scale(1);}
}
@-webkit-keyframes animTileSelectActive {
	0% {transform: translateY(0)}
	50% {transform: translateY(-7px)}
	100% {transform: translateY(0)}
}

/* ------------------------------------------------------------------ */
/* Platform visibility                                                 */
/* Driven by the <body> class set in tk-native-bridge.js:             */
/*   .ios-view      → iOS app                                          */
/*   .android-view  → Android app                                      */
/*   .pwa-view      → PWA / plain web (no app store)                   */
/* All store/purchase show-hide is controlled here, not in JS.        */
/* ------------------------------------------------------------------ */

/* Home-screen "Store" button: native apps only. (.store-container is  */
/* display:none by default, so it stays hidden on web automatically.)  */
.ios-view .store-container,
.android-view .store-container { display: block; }

/* Per-store blocks (coins + unlimited moves): show only the store of  */
/* the running platform; hidden on web.                                */
.store-container-iosstore,
.store-container-playstore { display: none; }
.ios-view .store-container-iosstore { display: block; }
.android-view .store-container-playstore { display: block; }

/* Restore Purchases + in-game "Get Coins" button: native apps only. */
.pwa-view #btn-restore-purchases,
.pwa-view #btn-store-coins-options { display: none; }

/* "Play on iOS / Android" note: web/PWA only. */
.store-mobile-only-message { display: none; }
.pwa-view .store-mobile-only-message { display: block; }

/* ------------------------------------------------------------------ */
/* IAP loading spinner                                                 */
/* Shown the moment a purchase / restore is tapped, until the native   */
/* store sheet (or its result) returns. Toggled from iap-tk.js.        */
/* ------------------------------------------------------------------ */
#iap-loading-spinner {display: none; position: fixed; top: 60px; left: 20px; z-index: 10000; box-sizing: border-box; width: 50px; height: 50px; padding: 8px; background: rgba(0, 0, 0, 0.8); border-radius: 50%;}
#iap-loading-spinner > div {width: 100%; height: 100%; border: 3px solid rgba(255, 255, 255, 0.2); border-top: 4px solid var(--game-color-green01); border-radius: 50%; box-sizing: border-box; animation: iap-spinner-spin 1s linear infinite;}
@keyframes iap-spinner-spin { to { transform: rotate(360deg); } }
/* Success state (added by iap-tk.js on tk:purchased for 3s): hide the spinning
   ring and show a tick. Restyle the tick here — swap the SVG / size / colour. */
#iap-loading-spinner.success > div { display: none; }
#iap-loading-spinner.success::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: url(../img/icon-complete.svg) center no-repeat;
	background-size: 24px 24px;
}

/* TEMP DEBUG BUTTON — forces a whirlwind strike on the first cell for testing.
   Remove this block (and the button in index.html + debugTestWhirlwindOnFirstCell in
   js/index.js) once the whirlwind sprite animation is confirmed working. */
#debug-whirlwind-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #e21c1c;
	border: 3px solid #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	z-index: 99999;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
	animation: debugWhirlwindBtnPulse 1.4s ease-in-out infinite;
	display: none !important;
}
#debug-whirlwind-btn:active {
	background: #a90f0f;
	animation: none;
}
@keyframes debugWhirlwindBtnPulse {
	0% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(226, 28, 28, 0.6); }
	70% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 12px rgba(226, 28, 28, 0); }
	100% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(226, 28, 28, 0); }
}