/* Pixel font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* responsive sizing so 5x4 holes always fit on screen */
:root{
	--bg:#0b1220;
	--panel:#122030;
	--accent:#ffd54a;
	--text:#ffffff;
	--btn-bg:#2b3b4f;
	--btn-border:#0f1724;
	--cols: 5;
	--rows: 4;
	--pad: 4vw;
	--gap: clamp(8px, 3vw, 36px);
	/* available width/height for holes */
	--avail-w: calc(100vw - 2 * var(--pad) - (var(--cols) - 1) * var(--gap));
	--avail-h: calc(100vh - 2 * var(--pad) - (var(--rows) - 1) * var(--gap));
	/* hole size is the smaller of width-based and height-based sizes */
	--hole-size: min(calc(var(--avail-w) / var(--cols)), calc(var(--avail-h) / var(--rows)));
	/* pixel scaling helper based on hole size */
	--pixel-unit: calc(var(--hole-size) / 11); /* base unit for pixel blocks inside each hole */
}

* { box-sizing: border-box; }
html,body { height:100%; margin:0; background:#9ad3ff; font-family: Arial, sans-serif; -webkit-font-smoothing:antialiased; }

body{
	margin:0;
	font-family: 'Press Start 2P', monospace;
	background:
		/* mine tunnel depth effect */
		radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 70%, #000 100%),
		/* rocky texture */
		repeating-linear-gradient(90deg, #3e2723 0px, #4e342e 2px, #3e2723 4px),
		repeating-linear-gradient(0deg, #4e342e 0px, #5d4037 2px, #4e342e 4px),
		/* base mine color */
		linear-gradient(180deg, #2e1a17 0%, #1a0e0a 100%);
	color:var(--text);
	display:flex;
	align-items:center;
	justify-content:center;
}

.menu{
	text-align:center;
	padding:40px;
	border-radius:8px;
	background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.05));
	box-shadow: 0 6px 24px rgba(0,0,0,0.6);
	min-height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	transition:opacity .4s ease, transform .4s ease;
}

/* Big bold pixel title */
.title{
	font-size:36px; /* adjust for bigger screens if needed */
	letter-spacing:2px;
	color:var(--accent);
	text-shadow:
		2px 2px 0 #000,
		4px 4px 0 rgba(0,0,0,0.6);
	margin:0 0 28px 0;
}

/* Pixel styled button */
.pixel-btn{
	appearance:none;
	border:4px solid var(--btn-border);
	background: linear-gradient(180deg, var(--btn-bg), #13202a);
	color:var(--text);
	padding:14px 28px;
	font-size:14px;
	cursor:pointer;
	border-radius:4px;
	box-shadow:
		4px 4px 0 rgba(0,0,0,0.7),
		inset 0 2px 0 rgba(255,255,255,0.02);
	transition: transform 90ms ease, box-shadow 90ms ease;
}

.pixel-btn:active{
	transform: translate(4px,4px);
	box-shadow: 0 0 0 rgba(0,0,0,0.0);
}

.pixel-btn:hover{
	filter:brightness(1.05);
}

/* HUD */
.hud {
	position:fixed;
	left:16px;
	top:16px;
	background: rgba(255, 210, 77, 0.95);
	color:#000;
	border:3px solid #000;
	padding:8px 12px;
	font-weight:bold;
	box-shadow:6px 6px 0 #000;
	z-index:40;
	border-radius:3px;
	image-rendering:pixelated;
}

/* show/hide helpers */
.hud.hidden { display:none; }
.game.hidden { opacity:0; transform:scale(.98); pointer-events:none; height:0; overflow:hidden; transition:opacity .4s ease, transform .4s ease; }

/* Grid of holes: use responsive columns and viewport gaps so holes spread across screen */
.game-grid {
	display:grid;
	grid-template-columns: repeat(var(--cols), var(--hole-size));
	grid-auto-rows: var(--hole-size);
	gap: var(--gap);
	justify-content:center;
	align-content:center;
	width:100%;
	max-width:none;
	margin:0;
}

/* Pixel hole (mine shaft) */
.hole {
	/* fill the grid cell and remain square */
	width:100%;
	aspect-ratio:1 / 1;
	/* mine shaft appearance */
	background: 
		radial-gradient(ellipse at center, #1a0e0a 0%, #2e1a17 40%, #3e2723 100%),
		repeating-linear-gradient(45deg, #4e342e 0px, #5d4037 2px, #4e342e 4px);
	border:3px solid #1a0e0a;
	position:relative;
	box-shadow: 
		4px 4px 0 #000 inset, 
		-2px -2px 0 rgba(0,0,0,.3) inset,
		0 0 20px rgba(0,0,0,0.5);
	display:flex; align-items:center; justify-content:center;
	cursor:pointer;
	user-select:none;
	overflow: visible;  /* allow mole to be fully visible */
	border-radius: 0;
}

/* inner mine shaft depth */
.hole::after {
	content:""; 
	position:absolute; 
	width:68%; 
	height:64%; 
	background:
		radial-gradient(ellipse at center, #000 0%, #1a0e0a 50%, #2e1a17 100%);
	left:50%; 
	top:26%;
	transform:translateX(-50%);
	border-radius:2px;
	z-index:0;
	box-shadow: 
		0 calc(var(--pixel-unit) / 2) 0 rgba(0,0,0,0.8) inset,
		inset 0 0 15px rgba(0,0,0,0.9);
}

/* mole: use image sprite if available; keep animation */
.mole {
	/* use image file named "mole.png" in the same folder (fallback to color) */
	background-color: #a0522d;
	background-image: url('mole.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width:44%;
	height:44%;
	/* fallback color in case image missing */
	background-color: #a0522d;
	border:2px solid #000;
	border-radius:2px;
	position:relative;
	z-index:2;               /* sit above the pit */
	box-shadow: none;
	opacity:0;
	transform: translateY(28%);
	transition: transform 140ms steps(1), opacity 120ms steps(1);
	pointer-events:none;
	/* create a subtle stepped highlight using repeating gradients */
	background-image:
		repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 calc(var(--pixel-unit) / 2), transparent calc(var(--pixel-unit) / 2) calc(var(--pixel-unit))),
		repeating-linear-gradient(180deg, rgba(0,0,0,0.06) 0 calc(var(--pixel-unit) / 2), transparent calc(var(--pixel-unit) / 2) calc(var(--pixel-unit)));
	background-size: 100% 100%, 100% 100%;
}

/* square eyes (pixel blocks) */
.mole::before, .mole::after {
	content:"";
	position:absolute;
	width: calc(var(--pixel-unit) * 0.9);
	height: calc(var(--pixel-unit) * 0.9);
	background:#000;
	border-radius:0;
	top:30%;
}
.mole::before { left:26%; }
.mole::after  { right:26%; }

/* mole nose: small pixel-block centered between the eyes */
.mole .nose {
	position: absolute;
	width: calc(var(--pixel-unit) * 0.9);
	height: calc(var(--pixel-unit) * 0.7);
	left: 50%;
	top: 46%;
	transform: translate(-50%, 0);
	background: #8b3f21;
	border: 1px solid #000;
	border-radius: 0;
	box-shadow: none;
	pointer-events: none;
}

/* small tweak so eyes/nose align nicely on very small holes */
@media (max-width:520px) {
	.mole .nose { width: calc(var(--pixel-unit) * 0.8); height: calc(var(--pixel-unit) * 0.6); top: 45%; }
}

/* visible mole state */
.hole.mole-up .mole { opacity:1; transform: translateY(0%); }

/* subtle feedback when scored */
.hole.scored { transform: scale(.98); transition: transform 80ms steps(1); }

/* ensure holes are still keyboard accessible */
.hole:focus { outline:3px solid rgba(255,255,255,.2); }

/* simple responsive */
@media (max-width:520px) {
	.game-grid { gap:10px; }
	.pixel-btn { padding:10px 14px; }
	:root { --pixel-unit: calc(var(--hole-size) / 12); }
}

/* shop button top-right */
.shop-btn {
	position: fixed;
	right: 16px;
	top: 14px;
	background: #79b6ff;
	color: #000;
	border: 3px solid #000;
	padding: 8px 10px;
	font-weight: bold;
	box-shadow: 6px 6px 0 #000;
	z-index: 50;
	border-radius: 0;
	cursor: pointer;
}

/* shop panel */
.shop-panel {
	position: fixed;
	right: 16px;
	top: 56px;
	background: rgba(40,70,120,0.95);
	color: #fff;
	border: 3px solid #000;
	padding: 10px;
	z-index: 60;
	box-shadow: 6px 6px 0 #000;
	min-width:180px;
	border-radius: 0;
}

/* shop item layout */
.shop-item { display:flex; gap:8px; align-items:center; }
.shop-preview { width:48px; height:48px; display:flex; align-items:center; justify-content:center; }
.shop-info { display:flex; flex-direction:column; gap:6px; }
.shop-title { font-weight:bold; font-size:14px; color:#bfe0ff; }
.shop-cost { font-size:13px; color:#fff; }

/* buy button small */
.buy-btn { padding:6px 8px; font-size:13px; }

/* close button */
.close-btn { margin-top:8px; width:100%; }

/* preview mole smaller and pixel-styled */
.mole.preview { width:70%; height:70%; border-radius:2px; border:2px solid #000; background-color:#b1693a; }

/* blue mole variant */
.mole.blue, .mole.preview.blue {
	background-color: #2b6fbf;
	background-image: none;
	/* slightly lighter nose/eye contrasts handled by existing pseudo elements */
}
.mole.blue::before, .mole.blue::after { background:#0b1320; } /* darker eyes for blue mole */
.mole.blue .nose { background:#163e6f; border-color:#000; }

/* red mole variant */
.mole.red, .mole.preview.red {
	background-color: #d32f2f;
	background-image: none;
	/* slightly lighter nose/eye contrasts handled by existing pseudo elements */
}
.mole.red::before, .mole.red::after { background:#8b0000; } /* darker eyes for red mole */
.mole.red .nose { background:#b71c1c; border-color:#000; }

/* hide helpers */
.hidden { display:none; }