:root { --gold: #ffd700; --dark: #1a1a1a; --win-target: #add8e6; --match-hit: #00ff00; --player-num: #ff00ff; }
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html { 
	height: 100%; 
	overflow: hidden;
}
body { 
	background: #333; 
	color: white; 
	font-family: sans-serif; 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	padding: 20px; 
	margin: 0; 
	height: 100%;
	overflow-y: auto;
	touch-action: pan-y; 
}

.main-layout { display: flex; gap: 30px; max-width: 1200px; align-items: flex-start; }

#sidebar { width: 220px; position: sticky; top: 20px; display: flex; flex-direction: column; gap: 15px; }

#ticket-shop { 
	background: var(--dark); border: 2px solid var(--gold); border-radius: 8px; 
	max-height: 400px; overflow-y: auto; padding: 10px; box-sizing: border-box;
	scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
	-webkit-overflow-scrolling: touch;
	position: relative;
}
#ticket-shop::-webkit-scrollbar { width: 5px; }
#ticket-shop::-webkit-scrollbar-track { background: transparent; }
#ticket-shop::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
#ticket-shop::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

.shop-filter-bar { 
	display: flex; 
	gap: 5px; 
	margin-bottom: 10px; 
	padding-bottom: 8px; 
	border-bottom: 1px solid #444; 
	background: var(--dark);
	position: sticky;
	top: 0;
	z-index: 10;
	padding-top: 0;
}
.shop-filter-bar button { 
	flex: 1; padding: 8px 0; font-size: 10px; background: #111; 
	border: 1px solid var(--gold); color: var(--gold); cursor: pointer; 
	text-transform: uppercase; font-weight: bold;
}
.shop-filter-bar button:hover { background: var(--gold); color: black; }

.shop-card { 
	background: #111 !important; border: 1px solid #444; 
	margin-bottom: 12px; cursor: pointer; min-height: 80px; display: flex; align-items: center; justify-content: center;
	border-radius: 4px; flex-shrink: 0; position: relative; overflow: hidden;
}
.card-label { background: rgba(0,0,0,0.7); padding: 8px; text-align: center; width: 100%; z-index: 2; position: relative; }
.shop-card.active { border: 2px solid var(--gold); }
.shop-card.locked { opacity: 0.4; cursor: not-allowed; pointer-events: none; filter: grayscale(1); }

#game-area { display: flex; flex-direction: column; align-items: center; width: 800px; flex-shrink: 0; min-width: 800px; }
#stats-bar { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 15px; background: #000; border: 2px solid #444; margin-bottom: 10px; font-family: monospace; font-size: 1.2em; box-sizing: border-box; }
#stats-bar #bank-display, #stats-bar #count-display { font-size: 1.3em; }
#stats-bar #status-msg { font-size: 1.2em; }

.restart-btn { color: #888; cursor: pointer; margin-right: 15px; text-decoration: none; font-size: 0.8em; }
.restart-btn:hover { color: var(--gold); }

#game-container-wrapper {
    position: relative;
    overflow: hidden;
    width: 800px;
    height: 400px; /* Will be set dynamically by JS */
    border: 4px solid #222;
}

#game-container { 
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    overflow: visible; /* Allow zoom to extend beyond wrapper */
    background-color: #333;
    background-repeat: no-repeat; 
    background-position: center top;
    background-size: contain; 
    touch-action: none;
    transform-origin: 0 0;
    transition: transform 0.3s ease-out; /* Smooth zoom animation */
}

#prize-layer { position: absolute; top: 0; left: 0; width: 800px; z-index: 1; display: none; }
canvas { position: absolute; top: 0; left: 0; width: 800px; display: block; background: transparent; max-width: none; }
#scratch-canvas { z-index: 10; cursor: none; touch-action: none; }

/* Hide coin on mobile only */
@media (max-width: 900px) {
	#coin { display: none !important; }
	#scratch-canvas { cursor: auto; }
}
#dust-canvas { z-index: 11; pointer-events: none; }
#debug-canvas { z-index: 12; pointer-events: none; display: none; }
#coin { position: absolute; width: 60px; height: 60px; pointer-events: none; z-index: 20; display: none; transform: translate(-50%, -50%); }

button.action-btn { padding: 15px; font-size: 14px; font-weight: bold; border: 2px solid var(--gold); background: #222; color: white; cursor: pointer; }
button.action-btn:disabled { opacity: 0.3; cursor: not-allowed; }
button.zoom-btn { display: none; } /* Hidden by default on desktop */

#sidebar-controls { display: none; flex-direction: column; gap: 10px; }
#main-controls { margin-top: 20px; display: flex; gap: 15px; padding-bottom: 80px; width: 100%; }
#main-controls button { flex: 1; }

/* Debug-only visual indicators */
.debug-mode .winning-num { background: rgba(173, 216, 230, 0.3); border: 1px solid var(--win-target); }
.debug-mode .player-num { background: rgba(255, 0, 255, 0.1); border: 1px solid var(--player-num); }
.debug-mode .match-hit { background: rgba(0, 255, 0, 0.3) !important; border: 2px solid var(--match-hit) !important; }
.debug-mode .match-jackpot { background: rgba(255, 215, 0, 0.3) !important; border: 3px solid var(--gold) !important; box-shadow: 0 0 10px var(--gold); }

/* Base slot styles (always visible) */
.slot { position: absolute; text-align: center; border-radius: 4px; padding: 2px; box-sizing: border-box; }
.slot img { width: 100%; height: auto; display: block; }

/* On-screen debug panel for mobile */
#mobile-debug { 
	position: fixed; 
	top: 10px; 
	right: 10px; 
	background: rgba(255,0,0,0.9); 
	color: white; 
	padding: 15px; 
	font-family: monospace; 
	font-size: 14px; 
	z-index: 99999; 
	max-width: 300px;
	border: 3px solid yellow;
	display: none; /* Hidden by default, change to 'block' for debugging */
	pointer-events: none;
	font-weight: bold;
}

/* Mobile styles - both portrait and landscape */
@media (max-width: 900px) {
	/* Show zoom button on ALL mobile devices */
	button.zoom-btn {
		display: block !important;
		border-color: #4a9eff !important;
	}
}

@media (max-width: 900px) and (orientation: portrait) {
	html, body {
		height: 100vh;
		height: 100dvh; /* Dynamic viewport height for mobile browsers */
		overflow: hidden;
	}
	
	body { 
		padding: 0;
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.main-layout { 
		flex-direction: column; 
		align-items: center; 
		gap: 8px; 
		width: 100vw;
		height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 5px;
	}
	
	/* Compact shop in portrait */
	#sidebar { 
		width: calc(100vw - 10px);
		max-width: 100%; 
		position: static; 
		order: 1;
		flex-shrink: 0;
	}
	#ticket-shop { 
		max-height: 160px; 
		padding: 5px;
		padding-top: 0;
	}
	.shop-filter-bar {
		margin-top: 0;
		margin-bottom: 5px;
		padding-bottom: 5px;
	}
	.shop-card {
		min-height: 55px;
		margin-bottom: 6px;
	}
	.card-label {
		padding: 5px;
		font-size: 0.85em;
	}
	.shop-filter-bar button {
		padding: 5px 0;
		font-size: 8px;
	}
	
	/* Game area takes priority */
	#game-area { 
		width: calc(100vw - 10px);
		max-width: 100%;
		min-width: auto;
		order: 2;
		flex-shrink: 0;
	}
	
	#stats-bar { 
		font-size: 0.7em; 
		padding: 5px; 
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 3px;
		text-align: center;
	}
	#stats-bar > div { 
		margin: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#stats-bar > div:last-child {
		grid-column: 1 / -1;
	}
	.restart-btn { 
		font-size: 0.65em; 
		margin-right: 3px;
	}
	
/* Ticket container - maximize usable space */
#game-container-wrapper {
    width: calc(100vw - 10px);
    height: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px);
    max-height: calc(100vw - 10px);
    position: relative;
    margin-bottom: 5px;
    overflow: hidden;
}

#game-container { 
    /* Size set by JS based on ticket */
    position: relative;
}
	
	#scratch-canvas, #dust-canvas, #debug-canvas { 
		width: 100% !important; 
		height: 100% !important;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#prize-layer { 
		width: 100% !important; 
		height: 100% !important;
		transform-origin: top left;
	}
	
	/* Compact buttons - stick to bottom */
	#main-controls { 
		flex-direction: column;
		gap: 6px;
		padding-bottom: 5px;
		padding-bottom: max(5px, env(safe-area-inset-bottom));
		width: 100%;
		flex-shrink: 0;
		margin-top: auto;
	}
	#main-controls button { 
		width: 100%;
		padding: 10px;
		font-size: 12px;
	}
	
	/* Hide sidebar controls in portrait - use main controls only */
	#sidebar-controls {
		display: none !important;
	}
}

/* Landscape mobile - reorganize layout */
/* Landscape mobile - reorganize layout */
@media (max-width: 900px) and (orientation: landscape) {
	html, body {
		overflow-x: hidden;
		padding: 0;
		margin: 0;
	}
	
	.main-layout {
		transform: scale(0.80);
		transform-origin: top center;
	}
	
	/* Compact sidebar in landscape */
	#sidebar {
		width: 180px;
	}
	
	#ticket-shop {
		max-height: 160px;
	}
	
	.shop-card {
		min-height: 40px;
	}
	
	.card-label {
		font-size: 0.75em;
		padding: 3px;
	}
	
	/* Sidebar controls appear below shop in landscape */
	#sidebar-controls {
		display: flex !important;
		flex-direction: column;
		gap: 8px;
	}
	
	#sidebar-controls button {
		padding: 8px;
		font-size: 11px;
	}
	
	/* FORCE zoom button to show in sidebar - highest specificity */
	#sidebar-controls > .zoom-btn,
	#sidebar-controls > button.zoom-btn,
	div#sidebar-controls button.action-btn.zoom-btn {
		display: block !important;
		border-color: #4a9eff !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	/* Stats bar in sidebar should be vertical with 3 rows */
	#sidebar-controls #stats-bar-clone {
		flex-direction: column !important;
		align-items: flex-start !important;
		font-size: 0.7em;
		padding: 6px;
		gap: 4px;
		width: 100%;
		display: flex !important;
		background: #000;
		border: 2px solid #444;
		margin-bottom: 8px;
	}
	
	#sidebar-controls #stats-bar-clone > div {
		width: 100%;
		display: block !important;
	}
	
	/* Hide original stats bar in game area during landscape */
	#game-area > #stats-bar {
		display: none !important;
	}
}