.safe-area-debugger {
  box-sizing: border-box;
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  
  /* --- NEW: Show the calculated 100dvh box --- */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh; /* Test the calculation you are using for the body/wrapper */
  
  /* --- Original Safe Area Inset Marker (Optional, use a second box for clarity) --- */
  /* If you want to keep the inset view, make a second debugger div. */

  /*
		border: 2px solid rgba(11, 69, 111, 0.8);
  background-color: rgba(0, 255, 0, 0.00); 
		*/
}

* {
  box-sizing: border-box;
}

/*DEBUG BORDER HOVER*/
/* 1. Debug Level 1: Targets ALL direct children of .page-wrapper (Blue Outline) */
body.debug-active .page-wrapper > * {
  outline: 3px solid rgba(0, 150, 255, 0.9) !important; /* Blue */
}
/* 2. Debug Level 2: Targets ALL descendants of .page-wrapper that are children of .content-wrapper (Green Outline) */
body.debug-active .content-wrapper > * {
  outline: 1px solid rgba(125, 167, 32, 0.9) !important; /* Green */
}

body.debug-active .contact-wrapper > * {
  outline: 1px solid rgba(176, 20, 244, 0.9) !important; /* Green */
}


/* 3. Hover Rule: Use red to highlight the one element currently under the mouse */
body.debug-active *:hover {
  outline: 2px dashed red !important; 
}

/*
* {
  background: rgb(200 255 200 / 0.1) !important;
}
*/

/*
body {
	background: black;
	box-sizing: border-box;
	font-family: "Noto Sans", "Droid Sans", Arial, sans-serif;
	margin: 0;
	padding: 0;
	min-height: 100lvh; 
    min-height: 100dvh; 
	padding-top: env(safe-area-inset-top, 0px);
	padding-right: env(safe-area-inset-right, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	padding-left: env(safe-area-inset-left, 0px);
}
*/

body {
	background: black;
	box-sizing: border-box;
	font-family: "Noto Sans", "Droid Sans", Arial, sans-serif;
	margin: 0;
	padding: 0; /* REMOVE PADDINGS HERE */
	min-height: 100dvh; /* Keep this to set the vertical container */
	overflow: hidden; /* Prevents scrolling on the main page */
}

.page-wrapper {
	display: flex;
	align-items: center;
	flex-direction: column;
	box-sizing: border-box;
	width: 100vw;
	min-height: 100dvh; /* Ensure it takes full height */
	background: #e3e2e1;
			/*border: 3px dashed rgba(255, 0, 0, 0.8);  Red dashed border*/
}

.game-buttons {
	/*position: fixed;*/
	/*bottom: 10vh;*/
	padding: 2vh 28px;
	font-size: 20px;
	font-weight: 600;
	/*min-width: 300px;*/
    width: 100%;
	color: white!important;
	/*background: linear-gradient(145deg, #2563eb, #1d4ed8); */
	background-color: #000000;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	/*box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);*/
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	transition:
		transform 0.2s,
		box-shadow 0.2s;
    /* 1. Reset link appearance */
    text-decoration: none!important; /* Removes the underline */
    /* 2. Make it behave like a block/button for padding/margins */
    display: inline-block; 
    text-align: center; /* Centers the text inside the button */
    /* Add back any specific button styling you had, e.g.: */
}

@media (hover: hover) and (pointer: fine) {
	.game-buttons:hover {
		transform: translateY(-2px);
		transform: scale(1.04);
		background-color: #2ba2fe;
		/*box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5);*/
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	}
}
/* Mobile/Touch Feedback: Applied on press/tap for all devices */
.game-buttons:active {
		/*
		transform: translateY(-2px);
		transform: scale(1.04);
		*/
		background-color: #2ba2fe;
		/*box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5);*/
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.game-buttons:active {
	transform: translateY(0);
}

footer {
	left: 0;
    height: 20px;
	/*padding: 10px 0;*/
	/*padding-top: 50px ;*/
	font-size: 14px;
	color: #666; 
    background-color: #e3e2e1;
    flex-shrink: 0; 
    padding: 0.rem;
    text-align: center;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

a:link {
    color: rgb(52,152,219); /* Blue text */
    text-decoration: none; /* Removes the default underline */
    font-weight: normal;
    transition: color 0.3s ease; /* Adds a smooth transition for hover effects */
}

a:visited {
    color: rgb(52,152,219); /* A subtle change for visited links (purple) */
}

a:hover {
    color: rgb(52,152,219); /* Pink text on hover */
    text-decoration: underline; /* Adds the underline back on hover */
    cursor: pointer; /* Ensures the cursor shows a pointer hand */
}

a:active {
    color: #ff5733; /* Bright red flash when clicked */
}

	
.email-link {
    /* Makes it look clickable */
    cursor: pointer; 
    color: rgb(52,152,219); /* A standard link color */
}
.email-link:hover {
    text-decoration: underline;
}

footer p {
	margin: 0;
	padding: 0;
	/* Forces the paragraph and its contents to behave as a single line */
	white-space: nowrap; 
	display: inline;
}

footer a {
	color: #3498db; /* A standard link color */
	text-decoration: none; /* Removes the underline */
	margin: 0 5px; /* Adds a little space around the links */
}

footer a:hover {
	text-decoration: underline; /* Adds underline back on hover */
}

/* MOBILE Media query for narrow screens (e.g., 800px and below) */
@media screen and (max-width: 768px) and (orientation: portrait) {
	footer {
		font-size: 12px;
	}
}