/*█████████████████████████████████ DEBUG █████████████████████████████████████ */
/*ACTIVATED IN THE SHARED.JS FILE*/

.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); 
		*/
}


/*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);
}
*/


/*█████████████████████████████████ TRANSITIONS █████████████████████████████████████ */

/*ADDED TO EACH PAGE NOW*/

/*
<style>
@view-transition {
  navigation: auto;
}

::view-transition-group(*) {
  animation-duration: 0.3s;
}
::view-transition-group(root) {
  background-color: #e3e2e1; 
}

::view-transition-old(root) {
	animation: leave 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
	z-index: 1;
}

::view-transition-new(root) {
  	z-index: 2; 
	animation: enter 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;

}
	
@keyframes leave {
		from { opacity: 1; transform: translateX(0); }
  to { opacity: 1; transform: translateX(00%); }
}

@keyframes enter {
		from { opacity: 0; transform: translateX(0%); }
  to { opacity: 1; transform: translateX(0); }
}
</style>
*/


/*█████████████████████████████████ CSS █████████████████████████████████████ */

* {
  box-sizing: border-box;
}

/*
:root {
   Forces hardware acceleration to stay active 
  transform: translateZ(0); 
  backface-visibility: hidden;
}
*/

/* 1. Ensure HTML and BODY take up the full screen height */
html {
	view-transition-name: root;
    height: 100%;
    overflow: hidden; /* No scrolling for HTML level either */
	font-size: clamp(11px, 8px + 1vh, 16px);
	/*Used for REM sizing*/
	/*font-size: 16px;  */
	letter-spacing: -0.2px; /* Use px, em, or rem */
	background-color: black;
	/*font-family: "Noto Sans", "Droid Sans", Arial, sans-serif;*/
	font-family: 'Droid Sans', sans-serif;
}

html, body, #canvas {
	margin: 0;
	padding: 0;
	border: 0;
}

/* --- BODY STYLES --- */
body {
	display: flex; /* Helps ensure flex children fill available space */
    background: black;
	
    /*font-family: "Noto Sans", "Droid Sans", Arial, sans-serif;*/
	
	-webkit-tap-highlight-color: transparent;  /* remove blue highlight */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Standard fallback */

    margin: 0;
    min-height: 100dvh; 
	height: 100%; /* Use height: 100% now that html has height: 100% */
    overflow: hidden; 
	color: #000000;
	touch-action: none;
	
	
	font-family: 'Droid Sans', sans-serif;
	font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
    /* ... smoothing styles ... */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-smooth: always;
	text-rendering: optimizeLegibility;
    text-shadow: 0 0 1.0px rgb(0, 0, 0, 0.5); 
	
					border: 0px dashed Green; 
	
}


/* --- PAGE WRAPPER STYLES --- */
/* 2. The Page Wrapper isnow the primary container that respects system UI */
.page-wrapper {
    display: flex;
    align-items: center; /* You might want align-items: stretch here */
    flex-direction: column;
    width: 100vw;
	
    height: 100dvh; /* Primary dynamic height fallback if svh not understood */
	height: 100%; 
    height: 100svh; 
	
	/* 1. Base fallback for old browsers */
    min-height: 100vh; 
    /* 2. Overwritten by SVH (stable, no resizing) */
    min-height: 100svh;

    /* Add the safe area padding directly to this wrapper */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    
    background: #e3e2e1;
	overflow-x: hidden;

     		/*border: 2px solid rgba(255, 0, 0, 1); */
}

.content-wrapper {
	display: flex;
	flex-grow: 1; /* Pushes the footer to the bottom */
	padding: 0;
	background: #e3e2e1;
	align-items: center;
	flex-direction: column;
	width: 100dvw;
	max-width: 700px;
					/*border: 0px solid rgb(226, 0, 255); */
}



/*█████████████████████████████████ text █████████████████████████████████████ */

h1 {
	margin-block-start: 1svh;
	margin-block-end: 0.3em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	letter-spacing: -2.9px; /* Use px, em, or rem */
	font-size: 2.3rem;
}
	
h2 {
	margin-block-start: 2.3svh;
	margin-block-end: 0.2em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	letter-spacing: -1.3px; /* Use px, em, or rem */
	font-size: 1.6rem;
}

h3 {
	margin-block-start: 3svh;
	margin-block-end: 0.1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	letter-spacing: -1.0px; /* Use px, em, or rem */
	font-size: 1.4rem;
}

h4 {
	margin-block-start: 4svh;
	margin-block-end: 0.1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	letter-spacing: -0.7px; /* Use px, em, or rem */
	font-size: 1.05rem;
}

p {
	margin-block-start: 0.4em;
	margin-block-end: 0.4em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	line-height: 1.38;
	letter-spacing: -0.4px; 
	color: #4b4b4b;
	/*font-size: 1rem;*/
}

ul {
	margin-block-start: 0.4em;
	margin-block-end: 0.4em;
	color: #4b4b4b
}

li {
	margin-block-start: 0em;
	margin-block-end: 0em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	line-height: 1.38;
}


/*█████████████████████████████████ window █████████████████████████████████████ */

.window-container {
	display: flex;
	flex-direction: column;
	justify-content: start;
	flex-grow: 1;
	border: 0px solid #ccc; /* Optional: for visibility */
	padding: 3vw;
	padding-top: 3svh;
	padding-bottom: 3svh;
	/*padding-bottom: 0px;*/
	margin-top: 3svh;
	background-color: #ffffff;
	width: 800px;
	max-width: 90vw;
	border-radius: 0.5rem;
	height: 82svh;
	max-height: 82svh;
	/*font-family: "Noto Sans", Arial, sans-serif;*/
	/*font-family: "Arial Nova", sans-serif;*/
	font-family: 'Droid Sans', sans-serif;
	/*font-family: "Droid Sans", "Arial", "sans-serif";*/
	transform: translateY(-10svh);
    opacity: 01;
	overflow: hidden;
	/*animation: slideInFromTop 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;*/
	animation: slideInFromTop 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
				border: 0px solid #ff0000; /* Optional: for visibility */
}


@media screen and (max-width: 768px) and (orientation: portrait) {
.window-container {
	/*padding-bottom: 0px;*/
	margin-top: 2svh;
	max-width: 94vw;
	height: 83svh;
	max-height: 83svh;
	/*font-family: "Noto Sans", "Droid Sans", Arial, sans-serif;*/
	font-family: 'Droid Sans', sans-serif;
	  		/*outline: 3px solid rgba(0, 150, 255, 0.9) !important;  Blue   */
			/*border: 011px solid #f70000;  */
}
}

#animate-in-container{
	opacity: 0; /* Starts transparent */
	/*transform: translateY(0px);  Starts 20px lower than its final position */
	transition: none;
	/* Add the animation: 1 second long, smooth ease-out, runs once */
	/*animation: fade-in-load 1s ease-out forwards;*/
	/*animation: fade-in-load 1s cubic-bezier(0, 0, 0.2, 1) forwards;*/
	animation: slideInFromTop 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
			border: 0px solid #ff0000; /* Optional: for visibility */
}

/* 3. Define the Keyframes */
@keyframes slideInFromTop {
	0% {
		transform: translateY(-10svh);
		opacity: 1;
	}
	100% {
		/* Final state: original position and fully visible */
		transform: translateY(0);
		opacity: 1;
	}
}

/*█████████████████████████████████ footer █████████████████████████████████████ */
/*
#footer-placeholder {
	display: flex;
	font-size: 0.9rem;
	left: 0;
    height: 4dvh;
	min-height: 4dvh;
	flex-shrink: 0;
					border: 0px solid rgb(7, 112, 54); 
}
*/

#footer-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4dvh;
    height: 4svh;
    min-height: 4dvh;
    min-height: 4svh;
    width: 100%;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;    /* Centers the <p> inside the footer */
    height: 100%;
    width: 100%;
    color: #666;
					border: 0px solid rgb(52,152,219); 
}

#main-footer a:before {
    content: "|";
	color: #666;     
	margin-left:  clamp(2px, 0.9vw, 7px);
	margin-right:  clamp(6px, 0.9vw, 9px);
    text-decoration: none; /* Keeps the line from being underlined */
    display: inline-block;
}

footer p {
	text-align: center;         /* Centers the text inside the <p> */
    margin: 0;                  /* Removes default <p> margin */
    font-size: clamp(0.77rem, 2.8vw, 0.85rem);  /* Lower vw so it actually scales */
    white-space: nowrap;
}

footer a,
footer a:visited {
    color: #149bff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

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: 0.8rem;
	}
}


@media only screen 
	and (orientation: landscape)
	and (min-width: 1024px) 
	and (max-width: 1366px)
	/* Tablet-specific condition */
	and (pointer: coarse)	
	{ 
		
	footer {
		/*nudge for ios bar - ipad*/
		/*padding-bottom: 2svh;*/
	}
}


/*█████████████████████████████████ buttons █████████████████████████████████████ */

.button-wrapper {
	/*padding-top: 10svh;*/
	padding-bottom: 1.9svh;
	display: flex;
	gap: 14px;
	width: 50vw;
	height: 8svh;
	max-width: 250px;
	justify-content: center;
	align-items: end;
	flex-grow: 1;
				border: 0px solid #ff0000; /* Optional: for visibility */
}

.game-buttons {
    /* 2. Make it behave like a block/button for padding/margins */
    /*display: inline-block; */
	
    display: flex; 
	align-content: center;
	justify-content: center;
	align-items: center;
	
	/*font-family: "Droid Sans", "Arial", sans-serif;*/
	font-family: 'Droid Sans', sans-serif;
	/*font-family: "Arial Nova", sans-serif;*/
    text-align: center; /* Centers the text inside the button */
	padding: 2svh 19px 2svh 20px; 
	/*font-size: 1.25rem;*/
	font-weight: 600!important;
	letter-spacing: -0.4px!important; /* Use px, em, or rem */
    width: 100%;
	color: #ffffff!important;
	background-color: #000000;
	border: none;
	border-radius: 12px;
	cursor: pointer;

	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    text-decoration: none!important; /* Removes the underline */

	transition: background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
	overflow: hidden;
	translateZ(0);

	--ratio: calc(100dvh / 1000px);
	font-size: clamp(1rem, var(--ratio) * 1.4rem, 3rem);
}

.game-buttons.numbers-button {
border-left: 27px solid #2ba2fe;
padding: 2svh 19px 2svh 2px; 
}

.game-buttons.words-button {
border-left: 27px solid #febe2b;
padding: 2svh 19px 2svh 2px; 
}

.game-buttons.anagram-button{
border-left: 27px solid #ce34e6;
padding: 2svh 19px 2svh 2px;
}



/* hover action for desktop only */
@media (hover: hover) and (pointer: fine) {
	.game-buttons:hover {
		/*
		transform: translateY(-2px);
		transform: scale(1.04);
		*/
		background-color: #2ba2fe;
		/*box-shadow: 0 8px 51px rgba(31, 122, 255, 0.5);*/
	}
	
	.game-buttons.words-button:hover {
		background-color: #febe2b;
		/*box-shadow: 0 8px 51px rgba(235, 102, 37, 0.5);*/
	}
	
	.game-buttons.anagram-button:hover {
		background-color: #ce34e6;
		/*box-shadow: 0 8px 51px rgba(185, 37, 235, 0.5);*/
	}
}


/* Mobile/Touch Feedback: Applied on press/tap for all devices */
.game-buttons:active {
		background-color: #2ba2fe;
		/*box-shadow: 0 8px 51px rgba(37, 99, 235, 0.5);*/
}

.game-buttons.words-button:active {
		background-color: #febe2b;
		/*box-shadow: 0 8px 51px rgba(235, 102, 37, 0.5);*/
}

.game-buttons.anagram-button:active {
		background-color: #ce34e6;
		/*box-shadow: 0 8px 51px rgba(185, 37, 235, 0.5);*/
}

.game-buttons:active {
	/*transform: translateY(40);*/
}

.back-buttons {
    display: flex; 
	align-content: center;
	justify-content: center;
	align-items: center;
	font-family: 'Droid Sans', sans-serif;
	/*font-family: "Arial Nova", sans-serif;*/
	padding: 3svh; 
	/*font-size: 1.25rem;*/
	font-weight: 600!important;
	letter-spacing: -0.4px!important; /* Use px, em, or rem */
    width: 100%;
	max-height: 5.5svh;
	color: #ffffff!important;
	background-color: #000000;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    text-decoration: none!important; /* Removes the underline */
	transition: background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
	overflow: hidden;
	translateZ(0);

	--ratio: calc(100dvh / 1000px);
	font-size: clamp(1rem, var(--ratio) * 1.3rem, 3rem);
}

/*█████████████████████████████████ loading bars █████████████████████████████████████ */

#play-button {
	/*display: flex;     */
	position: fixed;
	bottom: 5dvh;
	display: inline-block;
	font-family: 'Droid Sans', sans-serif;
	text-align: center; /* Centers the text inside the button */
	padding: 2svh 90px 2svh 90px; 
	font-weight: 600!important;
	letter-spacing: -0.4px!important; /* Use px, em, or rem */
	color: #ffffff!important;
	background-color: #000000;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	--ratio: calc(100dvh / 1000px);
	font-size: clamp(1rem, var(--ratio) * 1.4rem, 3rem);
	opacity: 0; 
	z-index: 6;
	visibility: hidden; 
	transform: translateY(20px); 
}
@media screen and (max-width: 600px) and (orientation: portrait) {
#play-button {
	bottom: 3vh;
}
}

/* Keyframes for the button's fade-up animation */
@keyframes button-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Class to apply when the button should appear */
#play-button.show {
    visibility: visible; /* Make it visible to start the animation */
    animation: button-fade-up 0.5s cubic-bezier(0, 0, 0.2, 1) 0.6s forwards; /* 0.5s fade-up with 0.3 second delay */
}


#play-button:hover {
	background-color: #2ba2fe;
}


.loader {
	display: flex;
	position: fixed;
	justify-content: center; /* Center horizontally */
	align-items: center; 
	font-family: 'Droid Sans', sans-serif;
	text-align: center; /* Centers the text inside the button */
	padding: 2svh 90px 2svh 90px; 
	font-weight: 600!important;
	letter-spacing: -0.4px!important; /* Use px, em, or rem */
	color: #ffffff!important;
	background-color: #000000;
	border-radius: 12px;
	cursor: pointer;
	bottom: 5dvh;
	z-index: 3;
	--ratio: calc(100dvh / 1000px);
	font-size: clamp(1rem, var(--ratio) * 1.4rem, 3rem);
	transform: translateY(0); 
	overflow: hidden; 
	height: 5.8dvh;
	min-height: 50px;
	width: 68%; /* Make the loader div span the full width of the viewport */    /* Anchor it to the left */
	max-width: 376px;
	animation: loader-fade-in 0.5s cubic-bezier(0, 0, 0.2, 1) 0.4s forwards;
	opacity: 0;
			border: 0px solid #ffc600; /* Optional: for visibility */
}

@keyframes loader-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media screen and (max-width: 600px) and (orientation: portrait) {
.loader {
	bottom: 3vh;
}
}

	
.loader.hide {
    opacity: 1; /* Initial state: Hidden and slightly down */
	pointer-events: none;
	animation: loader-fade-out 1s cubic-bezier(0, 0, 0.2, 1) 0.4s forwards; /* 0.5s fade-up */
}

/* Keyframes for the button's fade-up animation */
@keyframes loader-fade-out {
    from { opacity: 1; transform: translateY(0px); }
    to   { opacity: 0; transform: translateY(0px);  }
;
}

.progress {
	-webkit-appearance: none;
    -moz-appearance: none;
	appearance: none;
	border: none;
	border-radius: 16px; 
	/*box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0 );*/
	width: 100%;
	height: 100%;
	background-color: black;
	-moz-appearance: none;
}
/* Chrome/Safari container */	
.progress::-webkit-progress-bar {
	background-color: #000000;
}
/* Chrome/Safari filled part */
.progress::-webkit-progress-value {
	background-color: rgb(45, 169, 252);
	transition: width 0.4s ease-out;  /*Adjust 0.4s to your preferred speed */
}
/* Firefox filled part */
.progress::-moz-progress-bar {
	background-color: rgb(45, 169, 252);
	border-radius: 0px; 
	transition: width 0.4s ease-out; /* Same speed for consistency */
}
	
.loading-text {
	color: white;
	font-weight: 500;
	letter-spacing: -1px; /* Use px, em, or rem */
	font-family: 'Droid Sans', sans-serif;
	font-weight: 600!important;
  	/*transform: translateY(3px);*/
    z-index: 2;
    opacity: 1; /* Initial state: Hidden and slightly down */
    /*transform: translateY(20px); */
    visibility: visible;
	--ratio: calc(100dvh / 1000px);
	font-size: clamp(1rem, var(--ratio) * 1.4rem, 3rem);
}
	
.spinner_ajPY {
    transform-origin: center;
    /* Animation: name, duration (0.75s), count (infinite), speed (linear) */
    animation: spinner_AtaB .75s infinite linear;
}
@keyframes spinner_AtaB {
    100% {
        transform: rotate(360deg);
    }
}



/*█████████████████████████████████ links █████████████████████████████████████ */

a:link {
    color: rgb(77, 77, 77); /* A subtle change for visited links (purple) */
    color: #2ba2fe; /* A subtle change for visited links (purple) */
    text-decoration: none; /* Removes the default underline */
    /*text-decoration:underline;  Removes the default underline */
    font-weight: normal;
    transition: color 0.3s ease; /* Adds a smooth transition for hover effects */
}

a:visited {
    color: rgb(77, 77, 77); /* A subtle change for visited links (purple) */
	color: #2ba2fe; /* 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;
}


/*█████████████████████████████████ MOBILE CSS █████████████████████████████████████ */