/* ==========================================================================
   Mobile mode: (max-width: 1023px), (max-height: 499px)
   Design width 768px; frames scroll normally with static backgrounds.
   ========================================================================== */
@media (max-width: 1023px), (max-height: 499px) {
	:root {
		--k: var(--u);
		--ox: 0px;
		--oy: 0px;
	}

	.hide-mb {
		display: none !important;
	}

	.show-mb {
		display: inline-block;
	}

	.show-mb-block {
		display: block;
	}

	.fv-bg {
		display: none;
	}

	.section {
		min-height: 0;
		background-position: center top;
		background-size: 100% auto;
	}

	.frame1 {
		height: calc(1204 * var(--k));
		background-image: url(../images/frame1/bg-mb.webp);
	}

	.frame2 {
		height: calc(1071 * var(--k));
		background-image: url(../images/frame2/bg-mb.webp);
	}

	.frame3 {
		height: calc(1072 * var(--k));
		background-image: url(../images/frame3/bg-mb.webp);
	}

	.frame4 {
		height: calc(1141 * var(--k));
		background-image: url(../images/frame4/bg-mb.webp);
	}

	/* ---------- Frame 1 ---------- */
	.fv-header {
		height: calc(103 * var(--k));
		background: #bdd7ff;
	}

	.social-link--fanpage {
		--x: 37;
		--y: 31;
		--w: 194;
	}

	.social-link--group {
		--x: 286;
		--y: 34;
		--w: 178;
	}

	.social-link--discord {
		--x: 519;
		--y: 34;
		--w: 191;
	}

	.fv-logo {
		--x: 23;
		--y: 128;
		--w: 258;
		left: calc(var(--x) * var(--k));
		right: auto;
	}

	.gift-code {
		--x: 572;
		--y: 95;
		--w: 196;
	}




	.slogan-fx {
		--x: 0;
		--y: 701;
		--w: 715;
	}

	.slogan {
		--x: 5;
		--y: 755;
		--w: 724;
	}

	html[lang="th"] .slogan {
		--x: 0;
		--y: 730;
		--w: 752;
	}

	.btn-dl {
		--y: 1027;
	}

	.btn-dl--ios {
		--x: 13;
	}

	.btn-dl--android {
		--x: 264;
	}

	.btn-dl--apk {
		--x: 519;
	}

	/* ---------- Frame 2 ---------- */
	.tit-2 {
		--x: 26;
		--y: 79;
		--w: 715;
	}

	html[lang="th"] .tit-2 {
		--x: 89;
		--y: 57;
		--w: 589;
	}

	.gameplay-item--catch .gameplay-word {
		--x: 32;
		--y: 382;
		--w: 718;
	}

	.gameplay-item--catch .gameplay-char {
		--x: 39;
		--y: 480;
		--w: 729;
	}

	.gameplay-item--grow .gameplay-word {
		--x: 12;
		--y: 382;
		--w: 756;
	}

	.gameplay-item--grow .gameplay-char {
		--x: 117;
		--y: 536;
		--w: 612;
	}

	.gameplay-item--fight .gameplay-word {
		--x: 50;
		--y: 382;
		--w: 682;
	}

	.gameplay-item--fight .gameplay-char {
		--x: 0;
		--y: 549;
		--w: 768;
	}

	.gameplay-item--win .gameplay-word {
		--x: 145;
		--y: 385;
		--w: 492;
	}

	.gameplay-item--win .gameplay-char {
		--x: 70;
		--y: 508;
		--w: 657;
	}

	.gameplay-prev {
		--x: 79;
		--y: 910;
	}

	.gameplay-next {
		--x: 588;
		--y: 910;
	}

	/* ---------- Frame 3 ---------- */
	.tit-3 {
		--x: 42;
		--y: 53;
		--w: 685;
	}

	html[lang="th"] .tit-3 {
		--x: 94;
		--y: 35;
		--w: 580;
	}

	.gameboy {
		--x: 0;
		--y: 105;
		--w: 768;
	}

	.banner-view {
		--x: 38;
		--y: 288;
		--w: 691;
		--h: 336;
		--radius: 22;
	}

	.phone {
		--x: 0;
		--y: 276;
		--w: 768;
	}

	.frame3-char {
		--x: 486;
		--y: 192;
		--w: 282;
	}

	.frame3-pkm {
		--x: 66;
		--y: 628;
		--w: 273;
	}

	.banner-prev {
		--x: 29;
		--y: 956;
	}

	.banner-next {
		--x: 638;
		--y: 956;
	}

	.banner-dots {
		--x: 120;
		--y: 952;
		--w: 530;
		--h: 96;
		--dot-w: 57;
		--dot-h: 55;
		--dot-active-w: 95;
		--dot-active-h: 96;
	}

	/* ---------- Frame 4 ---------- */
	.letter-glow {
		--x: 0;
		--y: 185;
		--w: 768;
	}

	.letter {
		--x: 53;
		--y: 349;
		--w: 663;
	}

	html[lang="th"] .letter {
		--x: 37;
		--y: 396;
		--w: 695;
	}

	/* ---------- Footer ---------- */
	.footer-inner {
		height: calc(279 * var(--k));
	}
}