/* ===== RESET AND BASE STYLES ===== */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: Arial, sans-serif;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			min-height: 100vh;
			overflow: hidden;
		}

		/* ===== 3-PANEL LAYOUT SYSTEM ===== */
		.app-container {
			display: flex;
			width: 100vw;
			height: 100vh;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
		}

		.panel {
			min-width: 100vw;
			height: 100vh;
			scroll-snap-align: start;
			overflow-y: auto;
			position: relative;
		}
		
		.legend-overlay, .news-overlay {
			background: rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(5px);
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10px;
			justify-content: flex-start;
		}
		

		/* ===== PANEL CONTAINERS (MOBILE FIX) ===== */
		.legend-container, .news-container, .game-container {
			background: rgba(255, 255, 255, 0.2);
			padding: 15px;
			border-radius: 10px;
			margin: 10px auto; /* Consistent top margin */
			backdrop-filter: blur(10px);
			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
			width: min(400px, 90vw);
			max-height: 95vh;
			overflow-y: auto;
		}

		.legend-overlay, .news-overlay, .game-overlay {
			background: rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(5px);
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10px;
			justify-content: flex-start;
			padding-top: 10px; /* Ensure consistent top padding */
		}
		
		.news-sections .legend-section .crafting-recipes {
			display: flex !important;
			flex-direction: column !important;
			gap: 15px !important;
		}

		/* ===== LEGEND PANEL (LEFT) ===== */
		.legend-panel {
			background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
			color: white;
		}

		.legend-header {
			text-align: center;
			margin-bottom: 20px;
		}

		.legend-header h2 {
			font-size: 1.5rem;
			margin-bottom: 10px;
			color: #f7fafc;
		}

		.legend-sections {
			display: flex;
			flex-direction: column;
			gap: 20px;
			max-width: 600px;
			margin: 0 auto;
		}

		.legend-section {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 10px;
			padding: 15px;
			backdrop-filter: blur(10px);
			text-align: center;
		}

		.legend-section h3 {
			color: #ffd700;
			margin-bottom: 10px;
			font-size: 1.1rem;
			text-align: center;
		}

		.crafting-recipes {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			gap: 10px;
		}

		.recipe-card {
			background: rgba(255, 255, 255, 0.05);
			border-radius: 8px;
			padding: 12px;
			border: 1px solid rgba(255, 215, 0, 0.3);
			text-align: center;
		}

		.recipe-flow {
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 0.9rem;
		}

		.tile-preview {
			width: 30px;
			height: 30px;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			background: transparent;
			color: transparent;
		}
		
		.tile-preview.super::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			border: 1px solid rgba(255, 215, 0, 0.7);
			border-radius: 50%;
			transform: translate(-50%, -50%);
			animation: smokeRingPreview 2s ease-out infinite;
			pointer-events: none;
			z-index: -1;
		}
		
		.tile-preview.lit-joint {
			background: url('assets/lit_joint.png') center/cover !important;
			border: 2px solid #ff4500;
			animation: flicker 1s infinite alternate;
		}

		.tile-preview.blank-tile {
			background: transparent !important;
			border: 2px dashed rgba(255, 255, 255, 0.3);
		}

		.turns-text {
			font-size: 0.7rem;
			color: #ff6b6b;
			font-style: italic;
		}
		
		.tile-preview.grinder {
			background: url('assets/grinder.png') center/cover !important;
		}

		.tile-preview.purple-bud {
			background: url('assets/purple_bud.png') center/cover !important;
		}

		.tile-preview.purple-ground-bud {
			background: url('assets/busted_purple_bud.png') center/cover !important;
		}

		.tile-preview.paper {
			background: url('assets/paper.png') center/cover !important;
		}

		.tile-preview.joint {
			background: url('assets/joint.png') center/cover !important;
		}

		.tile-preview.dube-tube {
			background: url('assets/empty_dube_tube.png') center/cover !important;
		}

		.tile-preview.full-dube-tube {
			background: url('assets/full_dube_tube.png') center/cover !important;
		}
		
		.tile-preview.yellow-bud {
			background: url('assets/yellow_bud.png') center/cover !important;
		}

		.tile-preview.white-bud {
			background: url('assets/white_bud.png') center/cover  !important;
		}
		
		.tile-preview.super-purple-bud,
		.tile-preview.super-yellow-bud,
		.tile-preview.super-white-bud,
		.tile-preview.super-dube-tube,
		.tile-preview.super-lighter,
		.tile-preview.super-grinder {
			position: relative;
			overflow: hidden;
		}

		.tile-preview.super-purple-bud::before,
		.tile-preview.super-yellow-bud::before,
		.tile-preview.super-white-bud::before,
		.tile-preview.super-dube-tube::before,
		.tile-preview.super-lighter::before,
		.tile-preview.super-grinder::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			border: 1px solid rgba(255, 215, 0, 0.7);
			border-radius: 50%;
			transform: translate(-50%, -50%);
			animation: smokeRingPreview 2s ease-out infinite;
			pointer-events: none;
			z-index: -1;
		}

		@keyframes smokeRingPreview {
			0% {
				width: 20%;
				height: 20%;
				opacity: 0.8;
				border-color: rgba(255, 215, 0, 0.8);
			}
			100% {
				width: 110%;
				height: 110%;
				opacity: 0.3;
				border-color: rgba(255, 215, 0, 0.4);
			}
		}
		
		.tile-preview.super-ground-bud {
			background: url('assets/busted_purple_bud.png') center/cover !important;
		}

		.tile-preview.super-ground-bud::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			border: 1px solid rgba(255, 215, 0, 0.7);
			border-radius: 50%;
			transform: translate(-50%, -50%);
			animation: smokeRingPreview 2s ease-out infinite;
			pointer-events: none;
			z-index: -1;
		}
		
		.current-selection {
			background: rgba(255, 215, 0, 0.2);
			border: 2px solid #ffd700;
			min-height: 100px;
		}

		.selection-info {
			text-align: center;
		}

		.selected-tile-display {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			margin-bottom: 15px;
			padding: 8px;
			background: rgba(255, 215, 0, 0.1);
			border-radius: 6px;
		}

		.available-crafts h4 {
			color: #ffd700;
			margin: 10px 0 5px 0;
			font-size: 0.9rem;
		}

		.craft-option {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			margin: 8px 0;
			padding: 6px;
			background: rgba(255, 255, 255, 0.05);
			border-radius: 4px;
		}

		.craft-option small {
			margin-left: 8px;
			color: #cbd5e0;
		}

		.tile-info-content {
			text-align: left;
			margin-top: 10px;
		}

		.tile-info-content p {
			margin: 5px 0;
			font-size: 0.8rem;
			color: #e2e8f0;
		}

		.tile-info-content h4 {
			color: #ffd700;
			margin: 10px 0 5px 0;
			font-size: 0.85rem;
		}

		.match-tiles {
			display: flex;
			gap: 4px;
			flex-wrap: wrap;
			margin: 5px 0;
		}
		
		.earnings-guide {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.earnings-info p {
			margin: 0;
			font-size: 0.9rem;
			color: #e2e8f0;
		}

		.earnings-table {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.earnings-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: rgba(255, 255, 255, 0.05);
			padding: 8px 12px;
			border-radius: 6px;
			border: 1px solid rgba(255, 255, 255, 0.3);
			text-align: center;
		}

		.earnings-text {
			font-size: 0.8rem;
			color: white;
			font-weight: bold;
		}

		.money-box {
			background: rgba(76, 175, 80, 0.8);
			color: white;
			padding: 4px;
			border-radius: 4px;
			font-size: 0.8rem;
			font-weight: bold;
			margin: 0 2px;
			min-width: 24px;
			height: 24px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			vertical-align: middle;
		}
		.earnings-count {
			font-size: 0.85rem;
			color: #f7fafc;
			font-weight: bold;
		}

		.earnings-multiplier {
			font-size: 0.85rem;
			color: #4CAF50;
			font-weight: bold;
		}

		.earnings-tiles {
			display: flex;
			gap: -8px;
			align-items: center;
		}

		.earnings-tiles .tile-preview {
			margin-left: -8px;
		}

		.earnings-tiles .tile-preview:first-child {
			margin-left: 0;
		}
		
		.recipe-flow .tile-preview {
			margin-left: -6px;
		}

		.recipe-flow .tile-preview:first-child {
			margin-left: 0;
		}
		
		.earnings-result {
			display: flex;
			gap: 6px;
			align-items: center;
		}
		
		/* ===== GAME PANEL (CENTER) ===== */
		.game-panel {
			position: relative;
		}

		.game-overlay {
			background: rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(5px);
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10px;
			justify-content: flex-start;
		}

		.game-container {
			background: rgba(255, 255, 255, 0.2);
			padding: 15px;
			border-radius: 10px;
			margin: 15px auto;
			backdrop-filter: blur(10px);
			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
			width: min(400px, 90vw);
			aspect-ratio: 9 / 16;
			max-height: 95vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			overflow: hidden;
		}

		/* ===== DOUG TREE CONTAINER ===== */
		.doug-container {
			background: rgba(255, 255, 255, 0.2);
			padding: 10px;
			border-radius: 10px;
			margin-bottom: 10px;
			position: relative;
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 1;
			isolation: isolate; /* Creates a new stacking context */
		}

		.doug-avatar {
			width: 90px;
			height: 90px;
			background: url('assets/doug_tree_avatar.png') center/cover;
			border-radius: 10px;
			position: relative;
			z-index: 10;
			flex-shrink: 0;
			margin-left: -20px;
		}

		.kils-avatar {
			width: 90px;
			height: 90px;
			background: url('assets/kils.png') center/contain no-repeat;
			border-radius: 10px;
			position: absolute;
			top: 50%;
			right: -20px;
			transform: translateY(-50%);
			z-index: 10;
			display: none;
			opacity: 0;
			transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
		}

		.kils-avatar.fade-in {
			opacity: 1;
			transform: translateY(-50%) scale(1);
		}

		.title-card {
			width: 280px;
			height: 100px;
			background: url('assets/titlecard.png') center/contain no-repeat;
			border-radius: 15px;
			opacity: 0;
			transform: scale(0.5);
			transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
			animation: titleCardFadeIn 1s ease-in-out 0.5s forwards;
			position: absolute;
			top: 50%;
			left: 50%;
			transform-origin: center center;
			z-index: 5;
			pointer-events: none;
		}

		.title-card.fade-out {
			opacity: 0;
			transform: translate(-50%, -50%) scale(0.9);
			transition: all 0.5s ease-out;
		}

		@keyframes titleCardFadeIn {
			from { 
				opacity: 0; 
				transform: translate(-50%, -50%) scale(0.5); 
			}
			to { 
				opacity: 1; 
				transform: translate(-50%, -50%) scale(0.85);
			}
		}

		/* ===== SPEECH BUBBLES ===== */
		.speech-bubble, .kils-speech-bubble {
			background: white;
			border: 2px solid #333;
			border-radius: 15px;
			padding: 12px;
			width: 200px;
			height: 90px;
			box-shadow: 0 4px 8px rgba(0,0,0,0.3);
			z-index: 120;
			display: none;
			flex-direction: column;
			justify-content: space-between;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			max-width: 200px;
			transform-origin: center center;
		}

		/* ===== MUSICAL NOTES ANIMATION ===== */
		.flow-note {
			position: absolute;
			color: #000000;
			opacity: 0;
			pointer-events: none;
			font-weight: bold;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
			will-change: transform, opacity;
		}

		/* Z-depth layers */
		.flow-note.layer-front-1 {
			z-index: 150; /* In front of speech bubble */
		}

		.flow-note.layer-front-2 {
			z-index: 140; /* In front of speech bubble */
		}

		.flow-note.layer-back {
			z-index: 80; /* Behind speech bubble (120) */
			opacity: 0.7; /* Slightly transparent for depth */
		}

		/* Sine wave animation from Kils to Doug's head - SMOOTHER VERSION */
		@keyframes flowSineWave {
			0% { 
				transform: translate(0, 0) scale(1); 
				opacity: 0; 
			}
			5% {
				transform: translate(
					calc(var(--flow-distance-x) * 0.05), 
					calc(var(--flow-distance-y) * 0.05 + var(--wave-amplitude) * -0.98)
				) scale(1);
				opacity: 0.5;
			}
			10% { 
				transform: translate(
					calc(var(--flow-distance-x) * 0.1), 
					calc(var(--flow-distance-y) * 0.1 + var(--wave-amplitude) * -0.95)
				) scale(1); 
				opacity: 1; 
			}
			15% {
				transform: translate(
					calc(var(--flow-distance-x) * 0.15), 
					calc(var(--flow-distance-y) * 0.15 + var(--wave-amplitude) * -0.81)
				) scale(1);
			}
			20% { 
				transform: translate(
					calc(var(--flow-distance-x) * 0.2), 
					calc(var(--flow-distance-y) * 0.2 + var(--wave-amplitude) * -0.59)
				) scale(1); 
			}
			25% {
				transform: translate(
					calc(var(--flow-distance-x) * 0.25), 
					calc(var(--flow-distance-y) * 0.25 + var(--wave-amplitude) * -0.31)
				) scale(1);
			}
			30% { 
				transform: translate(
					calc(var(--flow-distance-x) * 0.3), 
					calc(var(--flow-distance-y) * 0.3 + var(--wave-amplitude) * 0)
				) scale(1); 
			}
			35% {
				transform: translate(
					calc(var(--flow-distance-x) * 0.35), 
					calc(var(--flow-distance-y) * 0.35 + var(--wave-amplitude) * 0.31)
				) scale(1);
			}
			40% { 
				transform: translate(
					calc(var(--flow-distance-x) * 0.4), 
					calc(var(--flow-distance-y) * 0.4 + var(--wave-amplitude) * 0.59)
				) scale(1); 
			}
			45% {
				transform: translate(
					calc(var(--flow-distance-x) * 0.45), 
					calc(var(--flow-distance-y) * 0.45 + var(--wave-amplitude) * 0.81)
				) scale(1);
			}
			50% { 
				transform: translate(
					calc(var(--flow-distance-x) * 0.5), 
					calc(var(--flow-distance-y) * 0.5 + var(--wave-amplitude) * 0.95)
				) scale(1); 
			}
			55% {
				transform: translate(
					calc(var(--flow-distance-x) * 0.55), 
					calc(var(--flow-distance-y) * 0.55 + var(--wave-amplitude) * 0.98)
				) scale(1);
			}
			60% { 
				transform: translate(
					calc(var(--flow-distance-x) * 0.6), 
					calc(var(--flow-distance-y) * 0.6 + var(--wave-amplitude) * 0.59)
				) scale(1); 
			}
			65% {
				transform: translate(
					calc(var(--flow-distance-x) * 0.65), 
					calc(var(--flow-distance-y) * 0.65 + var(--wave-amplitude) * 0.31)
				) scale(0.95);
			}
			70% { 
				transform: translate(
					calc(var(--flow-distance-x) * 0.7), 
					calc(var(--flow-distance-y) * 0.7 + var(--wave-amplitude) * 0)
				) scale(0.9); 
			}
			75% {
				transform: translate(
					calc(var(--flow-distance-x) * 0.75), 
					calc(var(--flow-distance-y) * 0.75 + var(--wave-amplitude) * -0.31)
				) scale(0.8);
			}
			80% { 
				transform: translate(
					calc(var(--flow-distance-x) * 0.8), 
					calc(var(--flow-distance-y) * 0.8 + var(--wave-amplitude) * -0.59)
				) scale(0.7); 
			}
			85% {
				transform: translate(
					calc(var(--flow-distance-x) * 0.85), 
					calc(var(--flow-distance-y) * 0.85 + var(--wave-amplitude) * -0.81)
				) scale(0.6);
				opacity: 0.9;
			}
			90% { 
				transform: translate(
					calc(var(--flow-distance-x) * 0.9), 
					calc(var(--flow-distance-y) * 0.9 + var(--wave-amplitude) * -0.95)
				) scale(0.5); 
				opacity: 0.7;
			}
			95% {
				transform: translate(
					calc(var(--flow-distance-x) * 0.95), 
					calc(var(--flow-distance-y) * 0.95 + var(--wave-amplitude) * -0.98)
				) scale(0.4);
				opacity: 0.4;
			}
			100% { 
				transform: translate(var(--flow-distance-x), var(--flow-distance-y)) scale(0.3); 
				opacity: 0; 
			}
		}


		/* Jesus Cross Animation */
		@keyframes jesusAppear {
			0% {
				opacity: 0;
				transform: translate(-50%, -50%) scale(0.3);
			}
			50% {
				transform: translate(-50%, -50%) scale(1.1);
			}
			100% {
				opacity: 1;
				transform: translate(-50%, -50%) scale(1);
			}
		}

		@keyframes jesusFade {
			0% {
				opacity: 1;
				transform: scale(1);
			}
			100% {
				opacity: 0;
				transform: scale(0.8);
			}
		}

		.jesus-avatar,
		.jesus-speech {
			animation-fill-mode: both;
		}
		
		.speech-bubble.musical-speech {
			border-color: #FFD700;
			box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
		}
		
		.kils-speech-bubble {
			right: auto;
			left: auto;
		}

		.speech-content {
			color: #333;
			font-size: 14px;
			line-height: 1.2;
			flex-grow: 1;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.speech-pointer {
			position: absolute;
			left: -10px;
			top: 20%;
			width: 0;
			height: 0;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			border-right: 10px solid white;
		}

		.kils-speech-pointer {
			position: absolute;
			right: -10px;
			top: 75%;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			border-left: 10px solid white;
		}

		/* Kils speaking mode */
		.speech-bubble::after {
			content: '';
			position: absolute;
			right: -10px;
			top: 20%;
			width: 0;
			height: 0;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			border-left: 10px solid white;
			display: none;
		}

		.speech-bubble.kils-speaking::after {
			display: block;
		}

		.speech-bubble.kils-speaking .speech-pointer {
			display: none;
		}

		/* ===== TUTORIAL BUTTONS ===== */
		.tutorial-choice-buttons {
			position: absolute;
			top: 50%;
			right: -10px;
			transform: translateY(-50%);
			display: flex;
			flex-direction: column;
			gap: 8px;
			z-index: 10;
		}

		.tutorial-yes-btn, .tutorial-no-btn {
			background: #4CAF50;
			color: white;
			border: none;
			padding: 8px 16px;
			border-radius: 5px;
			font-size: 12px;
			cursor: pointer;
			white-space: nowrap;
		}

		.tutorial-no-btn {
			background: #ff6b6b;
		}

		.tutorial-yes-btn:hover {
			background: #45a049;
		}

		.tutorial-no-btn:hover {
			background: #ff5252;
		}

		.lets-play-btn {
			background: #4CAF50;
			color: white;
			border: none;
			padding: 6px 12px;
			border-radius: 5px;
			font-size: 12px;
			cursor: pointer;
			align-self: center;
			margin: 10px 20px -10px 20px;
		}

		.lets-play-btn:hover {
			background: #45a049;
		}

		.skip-tutorial-btn {
			background: #ff6b6b;
			color: white;
			border: none;
			padding: 2px 4px;
			border-radius: 3px;
			font-size: 8px;
			cursor: pointer;
			align-self: flex-end;
		}

		/* ===== INVENTORY SYSTEM ===== */
		.inventory-container {
			background: rgba(255, 255, 255, 0.2);
			padding: 10px;
			border-radius: 10px;
			margin-bottom: 10px;
			overflow: visible !important;
			z-index: 10 !important;
		}

		.inventory-slots {
			display: flex;
			justify-content: center;
			gap: 3px;
			flex-wrap: nowrap;
			width: 100%;
			overflow: visible !important;
		}

		.inventory-slot {
			width: calc((100% - 15px) / 6);
			max-width: 45px;
			min-width: 30px;
			height: 40px;
			background: rgba(255, 255, 255, 0.3);
			border: 2px solid rgba(255, 255, 255, 0.5);
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			transition: all 0.3s;
			flex-shrink: 1;
		}

		.inventory-slot.filled {
			border-color: gold;
			background: rgba(255, 215, 0, 0.3);
		}

		.inventory-slot.for-sale {
			border-color: #4CAF50;
			background: rgba(76, 175, 80, 0.3);
		}

		.inventory-tile {
			width: calc(100% - 4px);
			height: calc(100% - 4px);
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			background: rgba(255, 255, 255, 0.8);
			font-weight: bold;
			position: relative;
			z-index: 2;
		}

		.inventory-tile.money {
			background: rgba(76, 175, 80, 0.8);
			color: white;
			font-size: 14px;
		}

		/* Inventory placeholder images */
		.inventory-slot::before {
			content: '';
			position: absolute;
			top: 2px;
			left: 2px;
			right: 2px;
			bottom: 2px;
			border-radius: 4px;
			opacity: 0.8;
			z-index: 1;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
		
		.inventory-slot[data-slot="full-dube-tube"]::before {
			background-image: url('assets/full_dube_tube.png');
			opacity: 0.8;
		}
		
		.inventory-slot[data-slot="fatty"]::before {
			background-image: url('assets/joint.png');
		}

		.inventory-slot[data-slot="lighter"]::before {
			background-image: url('assets/lighter.png');
		}

		.inventory-slot[data-slot="headphones"]::before {
			background-image: url('assets/headphones.png');
		}

		.inventory-slot[data-slot="track"] {
		position: relative !important;
		overflow: visible !important;
		z-index: 15 !important;
		}

		.inventory-slot[data-slot="track"]::before {
			background-image: url('assets/backpack.png') !important;
			opacity: 1 !important;
			background-color: transparent !important;
			background-size: contain !important;
			background-repeat: no-repeat !important;
			position: absolute !important;
			top: -20% !important;
			left: -20% !important;
			right: -20% !important;
			bottom: -20% !important;
			z-index: 15 !important;
			transform: none !important;
		}
		
		#multiplier-indicator {
		  background: rgba(255,215,0,0.15);
		  border: 1px solid rgba(255,215,0,0.7);
		  color: #ffd700;
		  font-weight: 800;
		  text-shadow: 0 0 4px rgba(0,0,0,.7);
		}
		
		#multiplier-indicator.pulse {
		  animation: multPulse 0.9s ease-in-out infinite;
		}

		@keyframes multPulse {
		  0%   { filter: brightness(1); }
		  50%  { filter: brightness(1.3); }
		  100% { filter: brightness(1); }
		}

		@keyframes multiplierSpinZoom {
		  0% {
			transform: translate(-50%, -50%) scale(0.3) rotateY(0deg) translateZ(0px);
			opacity: 0;
		  }
		  100% {
			transform: translate(-50%, -50%) scale(1.5) rotateY(720deg) translateZ(200px);
			opacity: 1;
		  }
		}

		@keyframes multiplierBounce {
		  0%, 100% {
			transform: translate(-50%, -50%) scale(1.5) translateZ(200px);
		  }
		  25% {
			transform: translate(-50%, -50%) scale(1.8) translateZ(300px);
		  }
		  50% {
			transform: translate(-50%, -50%) scale(1.3) translateZ(150px);
		  }
		  75% {
			transform: translate(-50%, -50%) scale(1.6) translateZ(250px);
		  }
		}

		@keyframes borderPulse {
		  0%, 100% {
			border-color: #ffd700;
			box-shadow: 0 0 15px #ffd700, inset 0 0 10px rgba(255, 215, 0, 0.3);
		  }
		  50% {
			border-color: #ffed4e;
			box-shadow: 0 0 25px #ffd700, inset 0 0 15px rgba(255, 215, 0, 0.5);
		  }
		}
		
		@keyframes fadeOutRing {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}

		.inventory-slot.ring-fading {
			animation: fadeOutRing 0.5s ease-out forwards;
		}

		/* Remove any filled state styling for backpack */
		.inventory-slot[data-slot="track"].filled {
			border: none !important;
			background: transparent !important;
		}

		.inventory-slot.filled::before {
			display: none;
		}

		/* ===== GAME CONTROLS ===== */
		.game-controls {
			display: flex;
			gap: 8px;
			justify-content: center;
			margin: 0 0 10px 0;
			flex-wrap: wrap;
		}

		.btn {
			padding: 0;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			transition: all 0.3s;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			background-color: transparent;
		}

		.btn:hover:not(:disabled) {
			transform: scale(1.05);
		}

		.btn:hover:not(:disabled):not(.btn-music) {
			/* Generic hover for all buttons except music button */
		}

		.btn.btn-music:hover:not(:disabled) {
			transform: scale(1.05);
			/* Opacity handled separately in .btn-music styles */
		}

		.btn-undo { 
			background-image: url('assets/undo_button.png');
			width: 44px;
			height: 44px;
		}

		.btn-music { 
			background-image: url('assets/music_button.png');
			width: 44px;
			height: 44px;
			opacity: 0.3;
			transition: opacity 0.3s ease;
		}

		.btn-music.playing { 
			background-image: url('assets/music_button.png');
			opacity: 1 !important;
		}

		.btn-music:hover:not(.playing) {
			opacity: 0.5;
		}

		.btn-music.playing:hover {
			opacity: 1;
		}

		.btn-sound {
			background-image: url('assets/sound.png');
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			width: 44px;
			height: 44px;
			opacity: 1;
			transition: opacity 0.3s ease;
		}
		.btn-sound.muted {
			opacity: 0.3;
		}

		.btn-sound:hover {
			background-color: rgba(255, 255, 255, 0.3);
		}

		.btn-new-game { 
			background-image: url('assets/new_game_button.png');
			width: 44px;
			height: 44px;
		}

		.btn-free-play { 
			background-image: url('assets/free_play_button.png');
			width: 44px;
			height: 44px;
		}

		.btn-panel-left, .btn-panel-right {
			background-image: url('assets/arrow_button.png');
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			background-color: transparent;
			width: 44px;
			height: 44px;
			border: none;
			padding: 0;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}

		.btn-panel-right {
			transform: scaleX(-1);
		}

		.btn-panel-right:hover:not(:disabled) {
			transform: scaleX(-1) scale(1.05);
		}

		/* ===== SOUND CONTROLS ===== */
		.sound-controls {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-top: 10px;
			padding: 8px;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 8px;
		}

		.btn-sound-toggle {
			background: rgba(255, 255, 255, 0.2);
			border: none;
			border-radius: 6px;
			padding: 8px 12px;
			font-size: 1.2rem;
			cursor: pointer;
			transition: all 0.2s;
			min-width: 44px;
			min-height: 44px;
		}

		.btn-sound-toggle:hover {
			background: rgba(255, 255, 255, 0.3);
			transform: scale(1.05);
		}

		.btn-sound-toggle.muted {
			opacity: 0.5;
		}

		.volume-slider {
			flex: 1;
			height: 6px;
			border-radius: 3px;
			background: rgba(255, 255, 255, 0.2);
			outline: none;
			-webkit-appearance: none;
		}

		.volume-slider::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background: white;
			cursor: pointer;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		}

		.volume-slider::-moz-range-thumb {
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background: white;
			cursor: pointer;
			border: none;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		}

		/* ===== GAME GRID ===== */
		.game-grid {
			background: rgba(0, 0, 0, 0.2);
			border-radius: 10px;
			touch-action: manipulation;
			flex: 1;
			min-height: 0;
		}

		/* ===== TILE SYSTEM ===== */
		.tile {
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.8);
			border-radius: 6px;
			cursor: pointer;
			user-select: none;
			position: relative;
			touch-action: manipulation;
		}

		.tile:hover:not(.falling):not(.cascading):not(.spawning):not(.swapping) {
			transform: scale(1.05);
			transition: transform 0.2s ease-out;
		}

		.tile.selected {
			border: 3px solid white;
			box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
			transform: scale(1.1);
		}

		.tile.super {
			box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
		}

		.tile.super.selected {
			border: 3px solid gold;
			box-shadow: 0 0 15px rgba(255, 215, 0, 0.9);
		}

		.tile.lit-joint {
			border: 2px solid #ff4500;
			background-color: rgba(255, 69, 0, 0.3);
			animation: flicker 1s infinite alternate;
		}

		/* ===== TILE ANIMATIONS ===== */
		@keyframes flicker {
			0% { opacity: 0.8; }
			100% { opacity: 1.0; }
		}
		
		@keyframes continuousSpin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
		
		.tile.swapping {
			z-index: 1000;
			transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		}

		.tile.cascading {
			z-index: 999;
			transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease-out;
		}

		.tile.spawning {
			animation: tileSpawn 0.3s ease-out;
		}

		@keyframes tileSpawn {
			0% {
				transform: scale(0);
				opacity: 0;
			}
			100% {
				transform: scale(1);
				opacity: 1;
			}
		}

		.tile.super-spawn {
			animation: superTileSpawn 0.6s ease-out;
		}

		@keyframes superTileSpawn {
			0% {
				transform: scale(0);
				opacity: 0;
				box-shadow: 0 0 0 rgba(255, 215, 0, 0);
			}
			100% {
				transform: scale(1);
				opacity: 1;
				box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
			}
		}

		/* ===== TILE BACKGROUNDS ===== */
		.bud { background: url('assets/purple_bud.png') center/cover transparent !important; }
		.grinder { background: url('assets/grinder.png') center/cover transparent !important; }
		.paper { background: url('assets/paper.png') center/cover transparent !important; }
		.lighter { background: url('assets/lighter.png') center/cover transparent !important; }
		.headphones { background: url('assets/headphones.png') center/cover transparent !important; }
		.joint { background: url('assets/joint.png') center/cover transparent !important; }
		.ground-bud { background: url('assets/busted_purple_bud.png') center/cover transparent !important; }
		.dube-tube { background: url('assets/empty_dube_tube.png') center/cover transparent !important; }
		.full-dube-tube { background: url('assets/full_dube_tube.png') center/cover transparent !important; }
		.lit-joint-img { background: url('assets/lit_joint.png') center/cover transparent !important; }
		.fatty { background: url('assets/joint.png') center/cover transparent !important; }
		.wild-card { background: url('assets/wild_card.png') center/cover transparent !important; }
		.backpack { background: url('assets/backpack.png') center/cover transparent !important; opacity: 1 !important; }
		.arrow { background: url('assets/arrow_button.png') center/cover transparent !important; opacity: 1 !important; }

		/* Super tiles - golden smoke ring effect from behind */
		.tile.super {
			position: relative;
			overflow: hidden; /* This clips the ring when it exceeds tile boundaries */
		}

		.tile.super::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			border: 2px solid rgba(255, 215, 0, 0.8);
			border-radius: 50%;
			transform: translate(-50%, -50%);
			animation: smokeRingBehind 2s ease-out infinite;
			pointer-events: none;
			z-index: -1; /* Behind the tile content */
		}

		@keyframes smokeRingBehind {
			0% {
				width: 10%;
				height: 10%;
				opacity: 0.9;
				border-width: 3px;
				border-color: rgba(255, 215, 0, 0.9);
			}
			70% {
				width: 90%;
				height: 90%;
				opacity: 0.4;
				border-width: 2px;
				border-color: rgba(255, 215, 0, 0.6);
			}
			100% {
				width: 120%;
				height: 120%;
				opacity: 0.3; /* Doesn't fade to 0 - just clips at tile edge */
				border-width: 1px;
				border-color: rgba(255, 215, 0, 0.4);
			}
		}
		
		.tile-preview.super {
			position: relative;
			overflow: hidden;
		}

		.tile-preview.super::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			border: 2px solid rgba(255, 215, 0, 0.8);
			border-radius: 50%;
			transform: translate(-50%, -50%);
			animation: smokeRingBehind 2s ease-out infinite;
			pointer-events: none;
			z-index: -1;
		}
		
		/* Ensure tile-preview super animations work in Selected Tile panel */
		.tile-info-content .tile-preview.super {
			position: relative;
			overflow: hidden;
		}

		.tile-info-content .tile-preview.super::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			border: 1px solid rgba(255, 215, 0, 0.7);
			border-radius: 50%;
			transform: translate(-50%, -50%);
			animation: smokeRingPreview 2s ease-out infinite;
			pointer-events: none;
			z-index: -1;
		}

		/* Keep the regular backgrounds for super tiles - no border */
		.super.bud { background: url('assets/purple_bud.png') center/cover transparent !important; }
		.super.grinder { background: url('assets/grinder.png') center/cover transparent !important; }
		.super.paper { background: url('assets/paper.png') center/cover transparent !important; }
		.super.lighter { background: url('assets/lighter.png') center/cover transparent !important; }
		.super.headphones { background: url('assets/headphones.png') center/cover transparent !important; }
		.super.joint { background: url('assets/joint.png') center/cover transparent !important; }
		.super.dube-tube { background: url('assets/empty_dube_tube.png') center/cover transparent !important; }
		.super.full-dube-tube { background: url('assets/full_dube_tube.png') center/cover transparent !important; }
		.super.ground-bud { background: url('assets/busted_purple_bud.png') center/cover transparent !important; }
		
		/* Hide emojis for asset images */
		.bud, .grinder, .paper, .lighter, .headphones, .joint,
		.ground-bud, .dube-tube, .full-dube-tube, .super.bud, .super.grinder, .super.paper, .super.lighter, 
		.super.headphones, .super.joint, .super.dube-tube, .super.full-dube-tube, .wild-card, .fatty, .lit-joint-img, .thumbs-up {
			font-size: 0 !important;
			color: transparent !important;
			background-color: transparent !important;
		}

		/* ===== NEWS PANEL (RIGHT) ===== */
		.news-section {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 10px;
			padding: 15px;
			backdrop-filter: blur(10px);
			text-align: center;
			margin-bottom: 20px;
		}

		.news-section h3 {
			color: #ffd700;
			margin-bottom: 10px;
			font-size: 1.1rem;
			text-align: center;
		}

		.news-stories {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.news-card {
			background: rgba(255, 255, 255, 0.05);
			border-radius: 8px;
			padding: 12px;
			border: 1px solid rgba(255, 215, 0, 0.3);
			text-align: left;
		}

		.news-meta {
			font-size: 0.75rem;
			color: #a0aec0;
			margin-bottom: 5px;
		}

		.news-title {
			font-weight: bold;
			margin-bottom: 5px;
			color: #f7fafc;
		}

		.news-excerpt {
			font-size: 0.85rem;
			color: #e2e8f0;
			line-height: 1.4;
		}

		.stat-card {
			background: rgba(255, 255, 255, 0.05);
			border-radius: 8px;
			padding: 15px;
			text-align: center;
			border: 1px solid rgba(255, 215, 0, 0.3);
		}

		.stat-number {
			font-size: 1.5rem;
			font-weight: bold;
			color: #ffd700;
			margin-bottom: 5px;
		}

		.stat-label {
			font-size: 0.8rem;
			color: #e2e8f0;
			line-height: 1.4;
		}

		/* ===== PANEL NAVIGATION ===== */
		.panel-indicators {
			position: fixed;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			gap: 10px;
			z-index: 1000;
		}

		.panel-dot {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.5);
			cursor: pointer;
			transition: all 0.3s;
		}

		.panel-dot.active {
			background: #ffd700;
			transform: scale(1.2);
		}

		/* ===== OVERLAYS AND MODALS ===== */
		.email-form {
			background: white;
			border: 2px solid #333;
			border-radius: 15px;
			padding: 15px;
			width: 300px;
			box-shadow: 0 4px 8px rgba(0,0,0,0.3);
			z-index: 100;
			display: none;
			flex-direction: column;
			gap: 10px;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.email-input {
			padding: 8px;
			border: 1px solid #ccc;
			border-radius: 5px;
			font-size: 14px;
		}

		.email-submit {
			background: #4CAF50;
			color: white;
			border: none;
			padding: 10px;
			border-radius: 5px;
			cursor: pointer;
			font-size: 14px;
		}

		.next-level-btn {
			background: #FF6B35;
			color: white;
			border: none;
			padding: 12px 24px;
			border-radius: 8px;
			font-size: 16px;
			cursor: pointer;
			margin: 0;
			display: none;
		}

		.win-message {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 30px;
			border-radius: 20px;
			text-align: center;
			font-size: 18px;
			z-index: 10000;
			display: none;
			max-width: 400px;
			border: 3px solid #FFD700;
			box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), 0 8px 32px rgba(0, 0, 0, 0.3);
		}

		.win-message h2 {
			margin-top: 0;
			font-size: 28px;
			color: #FFD700;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
			margin-bottom: 15px;
		}

		.win-message p {
			font-size: 16px;
			line-height: 1.5;
			margin: 10px 0;
			color: #f7fafc;
		}
		
		.high-score-modal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.8);
			z-index: 10001; /* Above victory panel */
			justify-content: center;
			align-items: center;
		}

		.high-score-modal .modal-content {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 30px;
			border-radius: 20px;
			text-align: center;
			max-width: 400px;
			border: 3px solid #FFD700;
			box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), 0 8px 32px rgba(0, 0, 0, 0.3);
		}

		.high-score-modal h2 {
			margin-top: 0;
			font-size: 28px;
			color: #FFD700;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
			margin-bottom: 15px;
		}

		.high-score-modal p {
			font-size: 16px;
			line-height: 1.5;
			margin: 10px 0;
			color: #f7fafc;
		}

		.high-score-modal input {
			width: 100%;
			padding: 12px;
			margin: 20px 0 10px 0;
			border: 2px solid #ffd700;
			border-radius: 10px;
			background: rgba(255, 255, 255, 0.9);
			color: #333;
			font-size: 16px;
			box-sizing: border-box;
		}

		.high-score-modal input:focus {
			outline: none;
			border-color: #fff;
			box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
		}

		.high-score-modal button {
			width: 100%;
			padding: 12px;
			margin: 5px 0;
			border: none;
			border-radius: 10px;
			font-size: 16px;
			font-weight: bold;
			cursor: pointer;
			transition: all 0.3s;
		}

		.high-score-modal .email-submit {
			background: #FFD700;
			color: #333;
		}

		.high-score-modal .email-submit:hover {
			background: #FFF;
			transform: scale(1.05);
			box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
		}

		.high-score-modal .btn {
			background: #666;
			color: white;
		}

		.high-score-modal .btn:hover {
			background: #888;
			transform: scale(1.05);
		}

		.leaderboard-list {
			margin: 15px 0;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 8px;
			padding: 10px;
		}

		.leaderboard-entry {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 8px 12px;
			margin: 5px 0;
			background: rgba(255, 255, 255, 0.05);
			border-radius: 5px;
			border-left: 3px solid #4CAF50;
		}

		.leaderboard-entry.empty {
			opacity: 0.5;
			border-left-color: #666;
		}

		.leaderboard-rank {
			font-weight: bold;
			color: #FFD700;
			min-width: 30px;
		}

		.leaderboard-name {
			flex: 1;
			margin: 0 15px;
			color: #fff;
		}

		.leaderboard-turns {
			color: #4CAF50;
			font-weight: bold;
		}

		/* ===== TUTORIAL HIGHLIGHTS ===== */
		.tutorial-highlight {
			border: 3px solid #FFD700 !important;
			box-shadow: 0 0 15px #FFD700 !important;
			animation: tutorialPulse 1.5s infinite;
		}

		@keyframes tutorialPulse {
			0%, 100% { transform: scale(1); }
			50% { transform: scale(1.05); }
		}

		.speech-highlight {
			border: 3px solid #FFD700 !important;
			box-shadow: 0 0 20px #FFD700 !important;
			animation: speechFade 3s ease-out forwards !important;
		}

		@keyframes speechFade {
			0% { 
				border-color: #FFD700;
				box-shadow: 0 0 20px #FFD700;
			}
			100% { 
				border-color: #333;
				box-shadow: 0 4px 8px rgba(0,0,0,0.3);
			}
		}

		.money-highlight-red {
			border: 3px solid #ff0000 !important;
			box-shadow: 0 0 15px #ff0000 !important;
			animation: moneyPulse 1s infinite alternate;
		}

		@keyframes moneyPulse {
			0% { transform: scale(1); }
			100% { transform: scale(1.05); }
		}

		/* ===== ANIMATIONS ===== */
		@keyframes popIn {
			0% {
				transform: translate(-50%, -50%) scale(0);
				opacity: 0;
			}
			100% {
				transform: translate(-50%, -50%) scale(1);
				opacity: 1;
			}
		}

		/* ===== RESPONSIVE DESIGN ===== */
		@media (min-width: 1024px) {
			.legend-container, .news-container {
				width: min(400px, 90vw); /* Same width as game container */
				height: calc(min(400px, 90vw) * (16/9) + 150px); /* Game container height + 150px */
				max-height: 95vh;
				background: rgba(255, 255, 255, 0.2);
				backdrop-filter: blur(10px);
				box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
				border-radius: 10px;
				overflow-y: auto;
				padding: 15px;
				margin: 15px auto;
			}
			
			.app-container {
				overflow-x: visible;
			}
			
			.panel {
				min-width: 33.33vw;
				height: 100vh;
			}
			
			.legend-panel, .news-panel {
				max-width: 400px;
			}
			
			.panel-indicators {
				display: none;
			}
		}

		@media (max-width: 768px) {
			/* Force overlay matching with maximum specificity */
			.panel.legend-panel .legend-overlay,
			.panel.news-panel .news-overlay,
			.panel.game-panel .game-overlay {
				background: rgba(255, 255, 255, 0.1) !important;
				backdrop-filter: blur(5px) !important;
				width: 100% !important;
				height: 100% !important;
				display: flex !important;
				flex-direction: column !important;
				align-items: center !important;
				padding: 10px !important;
				justify-content: flex-start !important;
				box-sizing: border-box !important;
			}
			
			/* Container matching */
			.legend-container, .news-container, .game-container {
				padding: 15px !important;
				margin: 10px auto !important;
				width: min(400px, 90vw) !important;
				max-height: 95vh !important;
				background: rgba(255, 255, 255, 0.2) !important;
				backdrop-filter: blur(10px) !important;
				box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
				border-radius: 10px !important;
				overflow-y: auto !important;
				box-sizing: border-box !important;
			}

			/* Game container keeps aspect ratio for proper layout */
			.game-container {
				aspect-ratio: 9 / 16 !important;
			}

			/* Legend and news containers use flexible height to match game container's visual height */
			.legend-container, .news-container {
				height: calc(min(400px, 90vw) * (16/9)) !important;
			}
			
			.inventory-slots { 
				gap: clamp(3px, 1vw, 6px);
			}
			
			.inventory-slot {
				height: 35px;
				min-width: 25px;
			}
			
			.inventory-tile {
				font-size: 10px;
			}
			
			.tile { 
				font-size: clamp(18px, 5vw, 26px);
				border-radius: 8px;
			}
			
			.tile:active {
				transform: scale(0.95);
				transition: transform 0.1s;
			}
			
			.btn:active {
				transform: scale(0.98);
			}
			
			.btn {
				font-size: 12px;
				padding: 8px 12px;
			}
			
			.legend-sections {
				padding: 0 10px;
			}
			
			.crafting-recipes {
				grid-template-columns: repeat(2, 1fr) !important;
				gap: 8px !important;
			}
			
			.recipe-card {
				padding: 8px !important;
			}
			
			.news-panel .crafting-recipes {
				display: flex;
				flex-direction: column;
				gap: 15px;
			}
			
			/* Prevent text selection on mobile */
			.game-grid, .tile, .inventory-slots {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			.win-message {
				max-width: 80vw !important;
				width: 80vw !important;
				padding: 20px !important;
			}
		}

		@media (max-width: 480px) {
			.inventory-slot { 
				width: clamp(28px, 14vw, 40px);
				height: clamp(28px, 14vw, 40px);
			}
			
			.inventory-tile { 
				font-size: clamp(7px, 3.5vw, 12px);
			}
			
			.title-card {
				width: calc(100% - 85px);
				height: 80px;
				max-width: 280px;
			}
			
			.doug-container {
				height: 80px;
				min-height: 80px;
			}
		}
		
		.btn-panel-left, .btn-panel-right {
			border: none;
			padding: 8px 12px;
			min-width: 44px;
			display: none;
			color: white;
		}

		@media (max-width: 768px) {
			.btn-panel-left, .btn-panel-right {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 8px 16px;
				min-width: 44px;
				min-height: 36px;
			}
		}
		
		.btn-panel-left:hover, .btn-panel-right:hover {
			background: #5A52E5;
		}

		/* ===== CHEAT SYSTEM ===== */
		/* Make inventory items draggable */
		.inventory-tile[draggable="true"] {
			cursor: grab;
			user-select: none;
		}

		.inventory-tile[draggable="true"]:active {
			cursor: grabbing;
		}

		/* Visual feedback when dragging over Doug */
		.doug-avatar.drag-over {
			filter: brightness(1.3);
			transform: scale(1.05);
			transition: all 0.2s ease;
		}

		/* Cheat Panel Styling */
		.cheat-panel-container {
			display: none;
			width: 100%;
			height: 100%;
			padding: 20px;
			box-sizing: border-box;
		}

		.cheat-panel-content {
			background: rgba(0, 0, 0, 0.5);
			padding: 30px;
			border-radius: 15px;
			border: 2px solid #ffd700;
			max-width: 350px;
			margin: 0 auto;
		}

		.cheat-panel-content h2 {
			color: #ffd700;
			text-align: center;
			margin-bottom: 20px;
			font-size: 1.5rem;
		}

		#cheat-password-input {
			width: 100%;
			padding: 12px;
			border-radius: 5px;
			border: 2px solid #ffd700;
			background: rgba(0, 0, 0, 0.3);
			color: white;
			font-size: 1rem;
			margin-bottom: 15px;
			text-align: center;
		}

		#cheat-password-input::placeholder {
			color: rgba(255, 255, 255, 0.5);
		}

		#cheat-submit-btn {
			width: 100%;
			padding: 12px;
			background: #ffd700;
			color: #1a1a2e;
			font-weight: bold;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-size: 1rem;
			transition: all 0.3s;
		}

		#cheat-submit-btn:hover {
			background: #fff;
			transform: scale(1.05);
		}