.rd2048-game {
				--rd-bg: #f7fbf8;
				--rd-bg-2: #eef5ef;
				--rd-shell: #ffffff;
				--rd-board: #bbada0;
				--rd-empty: rgba(238, 228, 218, .68);
				--rd-green: #16834a;
				--rd-green-dark: #0f6b3b;
				--rd-text: #4a463f;
				--rd-muted: #6f756f;
				--rd-border: #dfe8e1;
				width: 100%;
				max-width: 560px;
				margin: 24px auto;
				font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
				color: var(--rd-text);
				box-sizing: border-box;
			}

			.rd2048-game *,
			.rd2048-game *::before,
			.rd2048-game *::after {
				box-sizing: border-box;
			}

			.rd2048-shell {
				position: relative;
				overflow: hidden;
				border: 1px solid #dfe8e1;
				border-radius: 24px;
				padding: 20px;
				background:
					radial-gradient(circle at 0% 0%, rgba(236, 192, 92, .16), transparent 25%),
					radial-gradient(circle at 100% 100%, rgba(236, 151, 76, .13), transparent 27%),
					linear-gradient(180deg,#f7fbf8 0,#eef5ef 100%);
				box-shadow: 0 14px 34px rgba(55, 82, 62, .10);
			}

			.rd2048-top {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				gap: 14px;
				margin-bottom: 18px;
			}

			.rd2048-brand {
				min-width: 0;
			}

			.rd2048-kicker {
				display: inline-flex;
				align-items: center;
				gap: 7px;
				margin-bottom: 7px;
				padding: 6px 10px;
				border-radius: 999px;
				background: rgba(22, 131, 74, .09);
				color: var(--rd-green-dark);
				font-size: 11px;
				font-weight: 800;
				letter-spacing: .08em;
				text-transform: uppercase;
			}

			.rd2048-title-row {
				display: block;
				max-width: 100%;
			}

			.rd2048-title {
				margin: 0;
				color: #4d4942;
				font-size: clamp(28px, 7vw, 42px);
				line-height: .95;
				font-weight: 900;
				letter-spacing: -.045em;
			}

			.rd2048-subtitle {
				margin: 8px 0 0;
				color: var(--rd-muted);
				font-size: 13px;
				line-height: 1.45;
			}
			.rd2048-header-tools {
				display: flex;
				align-items: flex-start;
				gap: 7px;
				flex-shrink: 0;
			}

			.rd2048-top {
				position: relative;
			}

			.rd2048-brand {
				padding-right: 52px;
			}

			.rd2048-brand > .rd2048-rules-btn {
				position: absolute;
				top: 0;
				right: 0;
			}

			.rd2048-rules-btn {
				width: 36px;
				height: 36px;
				min-width: 36px;
				max-width: 36px;
				padding: 0;
				border: 1px solid #d8e2da;
				border-radius: 50%;
				background: rgba(255,255,255,.82);
				color: var(--rd-green-dark);
				font-size: 17px;
				font-weight: 900;
				line-height: 1;
				cursor: pointer;
				box-shadow: 0 3px 9px rgba(63, 83, 68, .06);
				transition: transform .15s ease, background .15s ease;
			}

			.rd2048-rules-btn:hover {
				background: #eef7f1;
				transform: translateY(-1px);
			}

			.rd2048-rules-overlay {
				position: fixed;
				inset: 0;
				z-index: 999999;
				display: none;
				align-items: center;
				justify-content: center;
				padding: 20px;
				background: rgba(28, 39, 32, .42);
				backdrop-filter: blur(9px);
				-webkit-backdrop-filter: blur(9px);
			}

			.rd2048-rules-overlay.is-visible { display: flex; }

			.rd2048-rules-modal {
				position: relative;
				width: min(100%, 390px);
				max-height: min(86vh, 620px);
				overflow-y: auto;
				padding: 24px;
				border: 1px solid #dbe5dd;
				border-radius: 20px;
				background: linear-gradient(180deg, #ffffff 0%, #f5f9f6 100%);
				box-shadow: 0 22px 65px rgba(30, 48, 36, .28);
				animation: rd2048-pop .18s ease-out;
			}

			.rd2048-rules-close {
				position: absolute;
				top: 12px;
				right: 12px;
				width: 34px;
				height: 34px;
				min-width: 34px;
				max-width: 34px;
				padding: 0;
				border: 1px solid #d6e1d9;
				border-radius: 50%;
				aspect-ratio: 1 / 1;
				line-height: 1;
				background: #eaf2ec;
				color: #59635c;
				font-size: 18px;
				font-weight: 800;
				cursor: pointer;
			}

			.rd2048-rules-modal h3 {
				margin: 0 40px 8px 0;
				color: #4d4942;
				font-size: 23px;
				font-weight: 900;
			}

			.rd2048-rules-modal > p {
				margin: 0 0 16px;
				color: #707770;
				font-size: 13px;
				line-height: 1.55;
			}

			.rd2048-rules-modal h4 {
				margin: 16px 0 7px;
				color: var(--rd-green-dark);
				font-size: 13px;
				font-weight: 900;
			}

			.rd2048-rules-modal ul {
				margin: 0;
				padding-left: 19px;
				color: #646b65;
				font-size: 12px;
				line-height: 1.65;
			}



			.rd2048-scores {
				display: flex;
				gap: 7px;
				flex-shrink: 0;
			}

			.rd2048-score {
				min-width: 76px;
				padding: 8px 10px;
					border-radius: 12px;
				background: rgba(255,255,255,.78);
				border:1px solid #cce5d1!important;
	box-shadow: 0 2px 0 #77a484, 0 0 8px rgba(33,133,68,.10);
				text-align: center;
			}

			.rd2048-score-label {
				display: block;
				color: #7a817b;
				font-size: 9px;
				font-weight: 800;
				letter-spacing: .09em;
				text-transform: uppercase;
			}

			.rd2048-score-value {
				display: block;
				margin-top: 2px;
				color: var(--rd-green-dark);
				font-size: 21px;
				font-weight: 900;
				line-height: 1.1;
			}

			.rd2048-actions {
				display: flex;
				gap: 9px;
				margin-bottom: 14px;
			}

			.rd2048-btn {
				min-height: 42px;
				border: 1px solid #d5dfd7 !important;
				border-radius: 5px;
				padding: 9px 15px;
				background: #ffffff !important;
				color: #4f554f !important;
				font: inherit;
				font-size: 13px;
				font-weight: 800;
				cursor: pointer;
				box-shadow: 0 3px 9px rgba(63, 83, 68, .06) !important;
				transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
				touch-action: manipulation;
			}

			.rd2048-btn:hover {
				background: #f8fbf8 !important;
				border-color: #b9cdbd !important;
				box-shadow: 0 5px 12px rgba(63, 83, 68, .09) !important;
			}

			.rd2048-btn:active {
				transform: scale(.97) !important;
			}

			.rd2048-btn-primary {
				background: #16834a !important;
				border-color: #16834a !important;
				color: #ffffff !important;
				box-shadow: 0 5px 12px rgba(22, 131, 74, .16) !important;
			}

			.rd2048-btn-primary:hover {
				background: #0f6b3b !important;
				border-color: #0f6b3b !important;
			}

			.rd2048-loader {
				width: 100%;
				margin: 0 0 8px;
				height: 4px;
				overflow: hidden;
				border-radius: 999px;
				background: rgba(22, 131, 74, .12);
				opacity: 1;
				transition: opacity .22s ease, height .22s ease, margin .22s ease;
			}

			.rd2048-loader-track {
				width: 100%;
				height: 100%;
				overflow: hidden;
				border-radius: inherit;
			}

			.rd2048-loader-fill {
				width: 0%;
				height: 100%;
				border-radius: inherit;
				background: var(--rd-green);
				transform: translateZ(0);
			}

			.rd2048-loader.is-complete {
				opacity: 0;
				height: 0;
				margin-bottom: 0;
			}

			.rd2048-game.is-loading [data-new],
			.rd2048-game.is-loading [data-undo],
			.rd2048-game.is-loading [data-rules],
			.rd2048-game.is-loading [data-board] {
				pointer-events: none !important;
			}

			.rd2048-game.is-loading [data-new],
			.rd2048-game.is-loading [data-undo],
			.rd2048-game.is-loading [data-rules] {
				cursor: wait;
			}

			.rd2048-board-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    padding: 10px;
    background: #27452f;
    border: 3px solid #27452f;
    box-shadow: 0 7px 16px rgba(0,0,0,.2);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

			/* The first board is rendered by PHP, so it is visible before JS executes. */
			.rd2048-grid {
				contain: layout paint;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 10px;
				width: 100%;
				height: 100%;
			}

			.rd2048-cell {
				display: flex;
				align-items: center;
				justify-content: center;
				min-width: 0;
				border-radius: 5px;
				background: var(--rd-empty);
				color: transparent;
				font-size: clamp(22px, 7vw, 42px);
				font-weight: 900;
				line-height: 1;
				overflow: hidden;
			}

			.rd2048-cell.rd2048-filled {
				color: #776e65;
				background: #eee4da;
				box-shadow: 0 2px 4px rgba(102, 82, 67, .08);
				animation: rd2048-pop .13s ease-out;
			}

			.rd2048-cell[data-value="2"] {
				background: #f6ece5;
				color: #776e65;
			}

			.rd2048-cell[data-value="4"] {
				background: #f7e2bd;
				color: #776e65;
			}

			.rd2048-cell[data-value="8"] {
				background: #f2b179;
				color: #f9f6f2;
			}

			.rd2048-cell[data-value="16"] {
				background: #f59563;
				color: #f9f6f2;
			}

			.rd2048-cell[data-value="32"] {
				background: #f67c5f;
				color: #f9f6f2;
			}

			.rd2048-cell[data-value="64"] {
				background: #f65e3b;
				color: #f9f6f2;
			}

			.rd2048-cell[data-value="128"] {
				background: #edcf72;
				color: #f9f6f2;
				font-size: clamp(20px, 6vw, 37px);
			}

			.rd2048-cell[data-value="256"] {
				background: #edcc61;
				color: #f9f6f2;
				font-size: clamp(20px, 6vw, 37px);
			}

			.rd2048-cell[data-value="512"] {
				background: #edc850;
				color: #f9f6f2;
				font-size: clamp(20px, 6vw, 37px);
			}

			.rd2048-cell[data-value="1024"] {
				background: #edc53f;
				color: #f9f6f2;
				font-size: clamp(18px, 5.5vw, 32px);
			}

			.rd2048-cell[data-value="2048"] {
				background: #edc22e;
				color: #f9f6f2;
				font-size: clamp(18px, 5.5vw, 32px);
			}

			.rd2048-status {
				min-height: 23px;
				margin: 13px 2px 0;
				color: var(--rd-muted);
				font-size: 12px;
				font-weight: 700;
				text-align: center;
			}

			.rd2048-help {
				margin: 14px 0 0;
				padding: 11px 13px;
				border: 1px solid #dce6de;
				border-radius: 12px;
				background: rgba(255,255,255,.64);
				color: #6f756f;
				font-size: 11px;
				line-height: 1.5;
				text-align: center;
			}

			.rd2048-overlay {
				position: absolute;
				inset: 0;
				z-index: 5;
				display: none;
				align-items: center;
				justify-content: center;
				padding: 20px;
				background: rgba(42, 53, 45, .38);
				backdrop-filter: blur(8px);
				-webkit-backdrop-filter: blur(8px);
				border-radius: 18px;
			}

			.rd2048-overlay.is-visible {
				display: flex;
			}

			.rd2048-modal {
				width: min(100%, 340px);
				padding: 23px;
				border: 1px solid #dbe5dd;
				border-radius: 18px;
				background: linear-gradient(180deg, #ffffff 0%, #f5f9f6 100%);
				box-shadow: 0 18px 50px rgba(51, 66, 55, .22);
				text-align: center;
			}

			.rd2048-modal-icon {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 48px;
				height: 48px;
				margin-bottom: 10px;
				border-radius: 14px;
				background: #e7f4eb;
				color: var(--rd-green-dark);
				font-size: 23px;
				font-weight: 900;
			}

			.rd2048-modal h3 {
				margin: 0;
				color: #4d4942;
				font-size: 23px;
				font-weight: 900;
			}

			.rd2048-modal p {
				margin: 8px 0 18px;
				color: #707770;
				font-size: 13px;
				line-height: 1.5;
			}

			.rd2048-modal-actions {
				display: flex;
				gap: 9px;
			}

			.rd2048-modal-actions .rd2048-btn {
				flex: 1;
			}

			@keyframes rd2048-pop {
				0% { transform: scale(.88); }
				100% { transform: scale(1); }
			}

			@media (max-width: 500px) {
				.rd2048-shell {
					padding: 14px;
					border-radius: 10px;
				}

				.rd2048-top {
					align-items: stretch;
					flex-direction: column;
				}

				.rd2048-scores {
					width: 100%;
				}

				.rd2048-score {
					flex: 1;
				}

				.rd2048-board-wrap {
					padding: 8px;
				}

				.rd2048-grid {
					gap: 8px;
				}

				.rd2048-cell {
					border-radius: 5px;
				}

				.rd2048-actions .rd2048-btn {
					flex: 1;
				}
			}

			@media (prefers-reduced-motion: reduce) {
				.rd2048-cell.rd2048-filled,
				.rd2048-btn {
					animation: none;
					transition: none;
				}
			}