/* Extracted from css/game.css. Original declarations; selectors scoped to site demos. */
.game-demo .grid-tile {
	--ui-font-scale: 1;
}
.game-demo .result-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: max-content;
	min-width: calc(120 * var(--rpx));
	padding: calc(14 * var(--rpx)) calc(18 * var(--rpx));
	background: rgba(255, 255, 255, 0.6);
	border-radius: var(--radius);
	box-sizing: border-box;
	overflow: visible;
}
.game-demo .result-box-score {
	background: #6ec4f0;
	color: #fff;
}
.game-demo .result-box-score .result-label,
.game-demo .result-box-score .result-num {
	color: #fff;
}
.game-demo .result-box-mult {
	background: var(--mult-accent);
	color: #fff;
}
.game-demo .result-box-mult .result-label,
.game-demo .result-box-mult .result-num {
	color: #fff;
}
.game-demo .result-label {
	font-size: calc(21 * var(--rpx) * var(--ui-font-scale));
	color: var(--text-soft);
}
.game-demo .result-num {
	display: inline-block;
	font-size: calc(42 * var(--rpx) * var(--ui-font-scale));
	font-weight: 700;
	vertical-align: baseline;
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.game-demo .result-times {
	flex: 0 0 auto;
	font-size: calc(42 * var(--rpx) * var(--ui-font-scale));
	font-weight: 700;
	color: var(--text-soft);
}
.game-demo .result-num {
	transform-origin: center center;
}
.game-demo .letter-grid-wrap {
	width: var(--letter-grid-wrap-size);
	height: var(--letter-grid-wrap-size);
	flex-shrink: 0;
	display: grid;
	place-items: center;
	background: var(--letter-grid-bg);
	border-radius: calc(14 * var(--rpx));
	padding: var(--letter-grid-wrap-padding);
	box-shadow: inset 0 calc(2 * var(--rpx)) calc(6 * var(--rpx)) rgba(0, 0, 0, 0.1);
	overflow: hidden;
	position: relative;
}
.game-demo .letter-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: calc(6 * var(--rpx));
	width: var(--letter-grid-inner);
	height: var(--letter-grid-inner);
}
.game-demo .grid-tile .letter-gem {
	z-index: 1;
}
.game-demo .grid-tile .letter-tile-char {
	position: relative;
	z-index: 1;
}
.game-demo .grid-tile {
	position: relative;
	cursor: pointer;
	background: var(--card-bright);
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(38 * var(--rpx) * var(--ui-font-scale));
	font-weight: var(--tile-letter-weight);
	color: var(--text);
	box-shadow: var(--shadow);
	/* 避免 opacity 被过渡插值或与 GSAP 抢样式时出现「留在原地的闪」 */
	transition: none;
}
.game-demo .grid-tile .letter-gem {
	position: absolute;
	left: calc(6 * var(--rpx));
	bottom: calc(6 * var(--rpx));
	width: calc(14 * var(--rpx));
	height: calc(14 * var(--rpx));
	border-radius: 50%;
	box-shadow: 0 calc(1 * var(--rpx)) calc(2 * var(--rpx)) rgba(0,0,0,0.2);
}
.game-demo .grid-tile .letter-gem.gem-common {
	background: #e8e4dc;
	border: calc(1 * var(--rpx)) solid #9c8b7a;
	box-shadow: 0 calc(1 * var(--rpx)) calc(2 * var(--rpx)) rgba(0, 0, 0, 0.2);
}
.game-demo .grid-tile .letter-gem.gem-rare   { background: #5b9bd5; }
.game-demo .grid-tile .letter-gem.gem-epic  { background: #9b59b6; }
.game-demo .grid-tile .letter-gem.gem-legendary { background: #e67e22; }
.game-demo .grid-tile {
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
}
.game-demo .treasure-slots {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	gap: calc(8 * var(--rpx));
	margin-top: calc(6 * var(--rpx));
	align-items: flex-start;
}
.game-demo .treasure-slot {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	height: auto;
	aspect-ratio: 1;
	background: rgba(255, 255, 255, 0.4);
	border: calc(2 * var(--rpx)) dashed var(--text-soft);
	border-radius: var(--radius);
	box-sizing: border-box;
	cursor: pointer;
}
.game-demo .treasure-slot.filled .treasure-slot-face {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
	pointer-events: none;
	container-type: size;
	container-name: treasure-cell;
}
.game-demo .treasure-slot.filled {
	position: relative;
	border: none;
	background: var(--card-bright);
	box-shadow: var(--shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	container-type: size;
	container-name: treasure-cell;
	-webkit-user-drag: none;
	touch-action: none;
}
.game-demo .treasure-slot-emoji {
	position: relative;
	z-index: 1;
	line-height: 1;
}
.game-demo .treasure-slot.filled .letter-gem {
	position: absolute;
	border-radius: 50%;
	z-index: 0;
}
.game-demo .treasure-slot.filled .letter-gem {
	left: var(--shop-shelf-gem-inset);
	bottom: var(--shop-shelf-gem-inset);
	width: var(--shop-shelf-gem-size);
	height: var(--shop-shelf-gem-size);
	box-shadow: 0 calc(1 * var(--rpx)) calc(2 * var(--rpx)) rgba(0, 0, 0, 0.2);
}
.game-demo .treasure-slot.filled .letter-gem.gem-rare {
	background: #5b9bd5;
}
.game-demo .treasure-slot.filled .letter-gem.gem-epic {
	background: #9b59b6;
}
.game-demo .treasure-slot.filled .letter-gem.gem-legendary {
	background: #e67e22;
}
.game-demo .treasure-slot-emoji {
	font-size: var(--shop-shelf-emoji-size);
}

/* Game accessory colours, material fallbacks, and scoring bubbles. */
.game-demo .score-popup-bubble,.game-demo .mult-popup-bubble {
	position: fixed;
	z-index: 350;
	padding: calc(6 * var(--rpx)) calc(14 * var(--rpx));
	border-radius: calc(10 * var(--rpx));
	font-size: calc(26 * var(--rpx) * var(--ui-font-scale));
	font-weight: 800;
	color: #fff;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.15);
	white-space: nowrap;
}
.game-demo .score-popup-bubble {
	background: #6ec4f0;
}
.game-demo .mult-popup-bubble {
	background: var(--mult-accent);
}
.game-demo .grid-tile.tile-material--css-fallback.tile-material-gold {
	background: linear-gradient(145deg, #f0c14a 0%, #c8861a 55%, #9a6310 100%);
}
.game-demo .grid-tile.tile-material--css-fallback.tile-material-steel {
	background: linear-gradient(160deg, #d8dde3 0%, #9aa3ad 52%, #6f7882 100%);
}
.game-demo .grid-tile.tile-material--css-fallback.tile-material-ice {
	background: linear-gradient(155deg, #dff3ff 0%, #9ec9e8 50%, #6a9fbf 100%);
}
.game-demo .grid-tile.tile-material--css-fallback.tile-material-water {
	background: linear-gradient(150deg, #7ec8f0 0%, #3a8ec4 55%, #256a96 100%);
}
.game-demo .grid-tile.tile-material--css-fallback.tile-material-fire {
	background: linear-gradient(150deg, #ffb347 0%, #e85d04 52%, #b83a00 100%);
}
.game-demo .grid-tile.tile-material--css-fallback.tile-material-wildcard {
	background: linear-gradient(135deg, #c084fc 0%, #818cf8 45%, #38bdf8 100%);
}
.game-demo .grid-tile.tile-material--css-fallback.tile-material-lucky {
	background: linear-gradient(145deg, #f5e6a8 0%, #d4af37 50%, #9a7b1a 100%);
}
.game-demo .tile-accessory-chip--level-upgrade {
	--tile-accessory-ripple-color: rgba(90, 178, 255, 0.8);
	background: #4299e1;
}
.game-demo .tile-accessory-chip--vip-diamond {
	--tile-accessory-ripple-color: rgba(77, 191, 122, 0.78);
	background: #38a169;
}
.game-demo .tile-accessory-chip--rewind {
	--tile-accessory-ripple-color: rgba(245, 101, 101, 0.82);
	background: #e53e3e;
}
.game-demo .tile-accessory-chip--coin {
	--tile-accessory-ripple-color: rgba(246, 173, 85, 0.82);
	background: #dd8b2e;
}
.game-demo .treasure-accessory-chip--fire {
	--treasure-acc-ripple-color: rgba(255, 120, 88, 0.82);
	background: #ff5722;
}
.game-demo .treasure-accessory-chip--drop {
	--treasure-acc-ripple-color: rgba(56, 159, 241, 0.78);
	background: #2b6cb0;
}
.game-demo .treasure-accessory-chip--wrench {
	--treasure-acc-ripple-color: rgba(212, 72, 140, 0.85);
	background: #ad1457;
}
.game-demo .treasure-accessory-chip--crop {
	--treasure-acc-ripple-color: rgba(104, 211, 145, 0.82);
	background: #2f855a;
}
.game-demo .treasure-accessory-chip--no-sell {
	--treasure-acc-ripple-color: rgba(120, 120, 120, 0.72);
	background: #6b7280;
}
.game-demo .treasure-accessory-chip--hourglass {
	--treasure-acc-ripple-color: rgba(120, 120, 120, 0.72);
	background: #9ca3af;
}
.game-demo .treasure-accessory-chip--rental {
	--treasure-acc-ripple-color: rgba(180, 83, 9, 0.72);
	background: #b45309;
}