.toast {
    position: fixed;
    bottom: 10%; /* Wordle-style high placement */
    left: 50%;
    transform: translateX(-50%);
    background-color: #c7c7c7; /* Deep Wordle dark */
    color: #202020;
    padding: 12px 16px;
    border-radius: 4px;
    font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    z-index: 2000; /* Ensure it's above the modal and buttons */
    pointer-events: none; /* User can click "through" it if they are fast */
    box-shadow: 2px 4px 8px rgba(0,0,0,0.8);
    display: none; /* Start hidden for jQuery fadeIn */
	
    /* The Magic: 2s total duration */
    /* animation: toast-fade 2s forwards; */
	/* Using a custom bezier for a "pop" effect */
    animation: toast-slide-up 2s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes toast-slide-up {
    0% { 
        opacity: 0; 
        transform: translate(-50%, 20px); /* Start lower */
    }
    15% { 
        opacity: 1; 
        transform: translate(-50%, 0); /* Slide up to position */
    }
    85% { 
        opacity: 1; 
        transform: translate(-50%, 0); 
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, -10px); /* Fade out sliding slightly further up */
    }
}

.modals {
	z-index: 2000;
	opacity: 0;
	position: absolute;
	top: 0%;
	width: 100%;
	height: 100%;
	transition:opacity 0.2s;
}

.modals.shodal {
	opacity:1;
}

.modal {
	z-index: -1;
	opacity: 0;
	position: absolute;
	top: 0%;
	width: 100%;
	height: 100%;
	/* margin-top:-20px; */
	transform: translateY(-20px);
	transition:opacity 0.2s, margin-top 0s 1s, transform 0s 0.3s;

	display:flex;
	/* font-family: 'Tajawal', sans-serif; */
	justify-content:center;
	align-items: flex-start;
}

	.modal .flodal {
		position: relative;
		width: 94%; /* 01/07 */
		max-width: 600px;
		background-color: #161616;
		max-height: 90%;
		border-radius: 0.75rem;
		border: 1px solid #323232;
		padding: 1.5rem 0.75rem 1.125rem 0.75rem;
		color: rgb(216 216 216);
		display: flex;
		flex-direction: column;
		overflow-y:auto;
		overflow-x:hidden;
		font-size:0.75em;
		font-weight:300;
	}

	.modal.teach_camo {
		align-items:center;
		justify-content:center;
	}

	.teach_camo .btn.rect {
		padding:0.75rem 1rem;
	}

	.modal .tea .flex.row.gap.rem2 > * {
		flex-grow: 1;
	}

	.modal.bottom.drawer {
		align-items:flex-end;
	}

	.modal.bottom.drawer .flodal {
		transform: translateY(100%);
		transition: transform 0.4s cubic-bezier(0.33, 0.33, 0.5, 1);;
		/* border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom: none; */
	}

.modal.appear {
	z-index: 2999;
	opacity: 1;
	/* margin-top:0px; */
	transform: translateY(0px);
	transition: opacity 0.2s, margin-top 0.2s, transform 0.2s;
}

/* .modal.disappear {
	z-index: -1;
	opacity: 0;
	animation: disappear 0.2s ease 0s 1;
} */

.modal.bottom.drawer.appear .flodal {
	transform: translateY(-2%);
}

.darkener {
	position:fixed;
	/* position: absolute; */
	/* width: 100%;
	height: 100%; */
	width: 100dvw;
	height: 100dvh;
	opacity:0.999;
	/* top:0;
	left:0;
	bottom:0;
	right:0; */
	/* padding-top:300px; */
	z-index: -1;
	/* background-color: rgb(0 0 0 / 60%); */
	background: linear-gradient(to bottom,
		rgba(0, 0, 0, 0.5) 0%,
		/* 50% black at the top (0% mark) */
		rgba(0, 0, 0, 0.7) 50%,
		/* 80% black in the middle (50% mark) */
		rgba(0, 0, 0, 0.9) 80%,
		/* 80% black in the middle (50% mark) */
		rgba(0, 0, 0, 0.95) 100%
		/* 90% black at the bottom (100% mark) */
	);
	/* background:	linear-gradient(to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.0) 10%,
		rgba(0, 0, 0, 0.7) 50%,
		rgba(0, 0, 0, 0.9) 80%,
		rgba(0, 0, 0, 0.95) 100%
	); */
}

.modal.account {
	display:flex;
	font-family: 'Tajawal', sans-serif;
	justify-content:center;
	align-items: flex-start;
    padding-top: 3.5rem;
}

	.set {
		position: relative;
		width: 94%; /* 01/07 */
		max-width: 600px;
		background-color: #161616;
		max-height: 90%;
		border-radius: 0.75rem;
		border: 1px solid #323232;
		padding: 1.5rem 0.75rem 1.125rem 0.75rem;
		color: rgb(216 216 216);
		display: flex;
		flex-direction: column;
		overflow-y:auto;
		overflow-x:hidden;
		font-size:0.75em;
		font-weight:300;
	}

	.set .code_station {
		/* grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(1, 1fr);
		grid-gap:1rem 4rem; */
		/* text-align:center; */
		margin-top: 1.5rem;
	}

	.sect .push {
		margin-left:0em;
		margin-bottom:1rem;
	}

	.set input {
		background-color: #121212;
    	border: 1px solid #272727;
		height:3rem;
		font-size:larger;
		letter-spacing:0.4rem;
		width:100%;
	}

		.set .email,
		.set .password {
			letter-spacing:normal;
			padding-left:0.75rem;
			text-align:left;
		}

	.code_paste {
		border:1px solid #272727;
	}

	.set input::placeholder {
		opacity:0.25;
	}

	.code_appears {
		border-radius:0.5rem;
		padding:0.25rem 1rem;
		background-color: transparent;
    	border: none;
		height:3rem;
		line-height:2.5rem;
		font-size:x-large;
		letter-spacing:0.3rem;
	}

	.code_note {
		font-size:0.75em;
	}

	.set .btn.rect {
		height:3rem;
		width:90%;
	}

	.merge_devices.disabled,
	.merge_gen.disabled {
		opacity:0.25;
		cursor:default;
	}

	.code_swap {
		width:100%;
		margin-top:1rem;
		width: calc(100% + 1.5rem);
	    margin-left: -0.75rem;
		position:relative;
	}

	.code_swap .drawer {
		/* min-width: calc(100% + 1.5rem);
    	margin-left: -0.75rem; */
		width:calc(100% + 1.5rem);
		padding:0 1rem;
		transform:translateX(0%);
		transition: transform 0.3s cubic-bezier(0.33, 0.33, 0.5, 1);
	}

	.code_swap.left .drawer {
		transform:translateX(100%);
	}

	.code_swap.right .drawer {
		transform:translateX(-100%);
	}
	
	.code_swap .tray {
		width:100%;
	}

	.tray.left,
	.tray.right {
		position:absolute;
		width:100%;
		padding:0 0.75rem;
	}

	.tray.right {
		left:100%;
	}

	.tray.left {
		right:100%;
	}

	.code_swap .have,
	.code_swap .need {
		display:flex;
		align-items:center;
		justify-content:center;
		flex-grow:1;
	}

	.code_swap .btn {
		font-size:0.9rem;
	}

	.expires {
		font-size:0.9rem;
		white-space:nowrap;
	}

	.code_slider.chev {
		padding:0.25rem 0.5rem;
	}

	.merge.disclaimer {
		margin-left:1rem;
		margin-top:1rem;
		font-size:smaller;
	}

	.merge_result {
		width: 100%;
		text-align: center;
		position: absolute;
		background-color: #42c2ff;
		height: 100%;
		color: white;
		opacity:0;
		transition:opacity 0.2s;
	}

	.merge_result.show {
		opacity:1;
	}

	.merge.disclaimer .norm {
		display:block;
	}

	.merge.disclaimer .err {
		display:none;
	}

	.merge.disclaimer.error .norm {
		display:none;
	}

	.merge.disclaimer.error .err {
		display:block;
	}

.modal.how_to_play {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Tajawal', sans-serif;
	/* font-family: 'Merriweather', serif; */
	font-weight: 100 !important;
	perspective: 180rem;
}

	.htp {
		position: relative;
		width: 94%; /* 01/07 */
		max-width: 600px;
		height: 84%;
		max-height: 800px;
		/* max-height: 37.5rem; */
		/* max-height: 44rem; */
		border-radius: 0.75rem;
		border: 1px solid #323232;
		/* color: rgba(255, 255, 255, 0.78); */
		color: rgb(216 216 216);
		/* line-height: 1.5rem;
		font-size: 1.125rem; */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		transition: transform 0.6s;
  		transform-style: preserve-3d;
	}


		.modal.flipper {
			perspective: 180rem;
			width: 100%;
			margin: auto;
		}

		.card-inner {
			display: grid;
			grid-template-areas: "stack"; /* Single grid cell for both faces */
			transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
			transform-style: preserve-3d;
			max-width:600px;
		}

		/* Toggle this class with JS */
		.card-inner.flipped {
			transform: rotateY(-180deg);
		}

		.card-front, .card-back {
			grid-area: stack; /* Stacks faces on top of each other */
			backface-visibility: hidden;
			
			/* Sizing and Overflow Logic */
			/* Limit to 80% of viewport height */
			/* max-height: 80vh;  */
			/* Enable scrolling for long content */
			/* overflow-y: auto;       */
			/* padding: 1.5rem 1rem 1.125rem 0.75rem; */
			/* background: white; */
			background: #161616;
			border-radius: inherit;
			box-shadow: 0 4px 15px rgba(0,0,0,0.1);
		}

		.card-front {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 1.5rem 1rem 1.125rem 0.75rem;
		}

		.card-back {
			transform: rotateY(180deg);
			font-size:0.8em;
			font-weight:400;
			background-color:#0e0e0e;
			text-align:justify;
		}

		.btn.rect.why.letters {
			border-top-left-radius:0;
			border-top-right-radius:0;
		}

		.btn.rect.why.letters:hover {
			border:unset;
		}

.card-frontzzz, .card-back {
  /* grid-area: stack;
  backface-visibility: hidden;
  max-height: 80vh; */
  /* Use Flexbox to stack content and button */
  display: flex;       
  flex-direction: column;
  /* background: white; */
  /* border-radius: 8px; */
  /* box-shadow: 0 4px 15px rgba(0,0,0,0.2); */
  overflow: hidden;    /* Clips the button corners to the card's border-radius */
}

/* Scrollable container */
.scroll-area, .card-content {
  flex: 1;             /* Takes up all remaining space */
  overflow-y: auto;    /* Internal scrollbar */
  padding: 20px;       /* Apply padding here instead of the parent */
  /* padding: 1.5rem 1rem 1.125rem 0.75rem; */
  padding: 0.5rem 1rem;
}

/* Sticky full-width button */
.btn-full {
  width: 100%;
  padding: 15px;
  border: none;
  /* background: #007bff; */
  /* color: white; */
  font-weight: bold;
  cursor: pointer;
  flex-shrink: 0;      /* Prevents the button from being squashed */
}

.btn-full:hover {
  background: #0056b3;
}

.card-back {
  transform: rotateY(180deg);
}

		/* Ensure images or large items don't break the grid */
		/* .card-front *, .card-back * {
			max-width: 100%;
		} */

		/* .modal.flipped .htp {
			transform: rotateY(180deg);
		} */
	
		.htp .face {
			position: absolute;
			top:0;
			left:0;
			width: 100%;
			height: 100%;
			background-color: #161616;
			padding: 1.5rem 1rem 1.125rem 0.75rem;
			border-radius: inherit;
			overflow-y: auto;
			overflow-x: hidden;
			backface-visibility: hidden; /* Hides the "underneath" side */
			-webkit-backface-visibility: hidden;
		}

		.htp .front.face {
			z-index:2;
		}

		.htp .back.face {
			font-size:0.8em;
			font-weight:400;
			background-color:#0e0e0e;
			transform: rotateY(180deg); /* Pre-flipped so it's readable after the turn */
		}

		.htp .merge {
			padding: 0 1rem;
    		border: none;
			outline: none;
			border-radius: 0.4rem;
			background-color: #333333;
			color: #737373;
			flex-grow: 0;
			height: 50%;
		}

	.htp_title {
		gap:1rem;
		/* justify-content:space-between; */
	}

		.htp_title .custom-dropdown {
			margin-right:4rem;
		}

		.custom-dropdown {
			position: relative;
			/* width: 250px; */
			font-family: sans-serif;
		}

		.dropdown-trigger {
			width: 100%;
			padding: 12px;
			background-color: var(--bg-dark);
			color: var(--text-light);
			border: 1px solid var(--border-color);
			border-radius: 6px;
			text-align: left;
			cursor: pointer;
			display: flex;
			justify-content: space-between;
		}

		.dropdown-menu {
			position: absolute;
			top: 100%;
			left: 0;
			/* width: 100%; */
			background-color: var(--bg-dark);
			border: 1px solid var(--border-color);
			border-radius: 6px;
			margin-top: 5px;
			padding: 0;
			list-style: none;
			display: none; /* Hidden by default */
			z-index: 10;
			box-shadow: 0 4px 12px rgba(0,0,0,0.5);
		}

		.dropdown-menu li {
			padding: 12px;
			color: var(--text-light);
			cursor: pointer;
		}

		.dropdown-menu li:hover {
			background-color: var(--bg-hover);
		}

		/* Toggle visibility class */
		.show {
			display: block !important;
		}

		.custom-dropdown .arrow {
			margin-left:1rem;
		}

	.htp h2,
	.htp h3,
	.htp h4 {
		font-weight: 300;
	}

	.htp .grid {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, 1fr);
		grid-gap: 0.2rem;
		justify-items: center;
		align-items: center;
		padding: 0.3rem 0;
	}

	.htp .example .mini {
		/* font-size: 0.75rem; */
		line-height: 0.3rem;
	}

	.htp .guidelines {
		list-style-type: none;
		/* padding-left: 0.9rem; */
		padding-left: 1em;
		vertical-align: middle;
		/* font-size: 0.975rem; */
		font-size: 0.8em;
		margin-top: 1em;
		font-weight:300;
		color:rgb(150 150 150);
	}

	.htp div {
		transition: transform 0.3s ease-out;
	}

	.htp .bumped {
		transform:translateX(-105%);
	}

	/* .htp .bumpable .bumper {
		position:absolute;
		width:100%;
		left:105%;
		top:0;
		font-size:1rem;
	} */

	/* .bumper .bigscore {
		margin-top:3rem;
	} */

	.bigscore {
		text-align: center;
		color:white;
		/* font-family: monospace; */
		/* padding:0 1rem; */
		min-width:60px;
	}

	@media screen and (min-width:1025px) {
		/* .htp .bumpable .bumper {
			font-size:1.2rem;
		} */
		.bigscore {
			text-align: center;
			min-width:90px;
		}
	}

	.bigscore .wordcount {
		position:relative;
		width:fit-content;
		font-size:3em;
	}

	.bigscore .lettercount {
		position: absolute;
		left: 100%;
		top: 0;
		font-size:0.5em;
		color: rgb(172 255 228);
	}

	.bigscore .label {
		position: absolute;
		bottom: calc(50% - 1em);
		left: calc(100% + 0.25rem);
		font-size: 0.3em;
	}

	.bigscore .label.ltz {
		font-size:0.5em;
		bottom:calc(50% - 0.7em);
	}

	
	.animagraphic {
		display:flex;
		flex-direction:column;
	}

    .sword {
		line-height: 1.2em;
		min-height: 1.2em;
		text-align:center;
		color:gray;
		position:relative;
	}

	.scaret {
		position:absolute;
		display: inline-block;
		width: 1px;
		height: 1.2em;
		background-color: rgb(220, 220, 220);
		margin-left: 0px;
		bottom:4px;
		vertical-align: middle;
		animation: blink 1s step-end infinite;
	}

	/* @media screen and (min-width: 1025px) {
		.scaret {
			bottom:4px;
		}
	} */

    @keyframes sblink {
		50% { opacity: 0; }
	}

	.htp .bigscore .stally {
		position:relative;
		z-index:10;
		transition:margin-top 0.3s ease-out;
	}

	.stally:has(.green),
	.stally:has(.yellow) {
		margin-top:-1.2rem;
	}

	.htp .bigscore .sscore {
		color:#cccccc;
		font-size:1.5em;
		margin-top:4px;
		transition:font-size 0.2s ease-out, color 0.2s;
	}



	@media screen and (min-width: 580px) {

		.stally:has(.green),
		.stally:has(.yellow) {
			margin-top: -1.7rem;
		}

		.htp .bigscore .sscore {
			margin-top:0;
		}
	}


	.htp .bigscore .sscore.yellow {
		color: var(--yellow);
	}

	.htp .bigscore .sscore.green {
		color: var(--green);
	}

	.htp .bigscore .sscore.green,
	.htp .bigscore .sscore.yellow {
		font-size:2em;
	}

	/* Word Count: Pronounced Pop */
	.sword_count {
		 /* Medium gray base */
		/* color: #888; */
		display: inline-block;
		transition: color 0.2s;
	}

	.sword_count.pop {
		animation: wordPop 0.2s ease-out 0.1s;
		/* Almost white */
		/* color: #f0f0f0; */
	}

	@keyframes wordPop {
		0% { transform: scale(1); }
		50% { transform: scale(1.3); }
		100% { transform: scale(1); }
	}

	/* Letter Count: Subtle Pulse */
	.sletter_count {
		/* color: #777; */
		display: inline-block;
		position:relative;
	}

	.sletter_count.pulse {
		/* transform: translateX(100%); */
		animation: letterPulse 0.1s ease-out;
		/* color: #ddd; */
	}

	.sletter_count sup {
		font-size: 0.7em;
		left: calc(100% + 2px);
		position: absolute;
		bottom: calc(100% + 4px);
	}

	@keyframes letterPulse {
		0% { transform: scale(1); }
		50% { transform: scale(1.1); }
		100% { transform: scale(1); }
	}


	.htp .guidelines li {
		line-height: 1.5em;
	}

	.htp .guidelines li i {
		vertical-align: middle;
		padding-right:0.375rem;
	}

	.htp .guidelines .ph-gavel {
		color: rgb(255 41 117);
	}

	.htp .guidelines .ph-list-magnifying-glass {
		color: rgb(255, 198, 66);
	}

	.htp .guidelines .bullet {
		font-weight:300;
		padding-right:0.375rem;
		margin-left:-0.0375rem;
		color:rgb(232 232 232);
		color:rgb(0, 255, 173);
	}

	.htp .guidelines sup {
		font-size: 0.75em;
		line-height:0;
	}

	.htp .guidelines .bullet sup {
		font-size: 0.55em;
	}

	.why.letters {
		cursor:pointer;
	}

	.bigscore {
		width:11rem;
	}

	.letnote {
		position: absolute;
		font-size: 0.5em;
		white-space: nowrap;
		bottom: 87%;
		right: 1rem;
	}

	.wordnote {
		position: absolute;
		font-size: 0.3em;
		white-space: nowrap;
		top: 75%;
		right: 1rem;
	}

	@media screen and (min-width:1025px) {
		.example .mini {
			font-size:1rem;
		}
	}

	.example .mini {
		font-size: 0.8rem;
	}

	.example.additions span,
	.example.additions .head {
		color: #67e87f;
		color: rgb(0, 194, 255);
		font-weight: bold;
	}

	.example.removals span,
	.example.removals .head {
		color: #ff9999;
		color: rgb(255, 110, 204);
		font-weight: bold;
	}

	.example.changes span,
	.example.changes .head {
		color: #ece56f;
		color: rgb(255, 198, 66);
		font-weight: bold;
	}

	.example .words span {
		font-weight: bold;
		/* text-decoration: underline; */
	}

	.htp h1,
	.htp h2,
	.htp h3,
	.htp h4,
	.htp h5 {
		margin: 0.375rem;
	}

	.grid div {
		text-align: center;
	}

	.example .head {
		text-transform: uppercase;
	}

	.example .words {
		text-transform: lowercase;
	}

.modal.puzzle_picker {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content:flex-start;
}

	.picker-container {
		display: flex;
		z-index: 2001;
		width: 100%;
		/* margin: 1rem auto; */
		/* margin-top: 7rem; */
		margin-top:0.5rem;
		width: calc(100% - 1rem);
		max-width: 600px;
		height: calc(var(--picker-row-height) * var(--visible-rows));
		background: #111;
		color: #fff;
		position: relative;
		overflow: hidden;
		border-radius: 10px;
		border-radius: 0.5rem;
		touch-action: pan-y;
		font-size: 0.75rem;
		border: 1px solid rgb(44, 44, 44);
	}

	@media only screen and (min-width: 1025px) {
		.picker-container {
			font-size:1rem;
		}
	}

		.picker_col {
			flex: 1;
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;
			scroll-behavior: auto !important;
			scrollbar-width: none;
			overscroll-behavior: none;
		}

		.picker_col::-webkit-scrollbar {
			display: none;
		}

		.picker_col ul {
			/* For 7 rows, we need 3 rows of padding. For 9 rows, change 3 to 4. */
			padding: calc(var(--picker-row-height) * 3) 0;
			padding: calc(var(--picker-row-height) * (var(--visible-rows) * 0.5 - 0.5)) 0;
			margin: 0;
			list-style: none;
		}

		.picker_col li {
			height: var(--picker-row-height);
			line-height: var(--picker-row-height);
			text-align: center;
		}

		#y-col li,
		#m-col li,
		#d-col .pzl_date {
			color:rgb(80 80 80);
			min-width: 2.5rem;
			min-width: 1.875rem;
		}

		#d-col li.bonus .pzl_date {
			margin-left:1rem;
			/* margin-right:-2rem; */
		}

		#d-col li.bonus .pzl_number,
		#d-col li.bonus .pzl_date {
			display:none;
		}

		#y-col li.active,
		#m-col li.active,
		#d-col li.active .pzl_date,
		#d-col li.day:has(+ li.bonus.active) .pzl_date {
			color:rgb(240 240 240);
		}

		#d-col li.day:not(.bonus) {
			border-top:1px solid rgb(32 32 32);
			border-image: linear-gradient(to right, transparent, #292929, transparent) 1;
    		border-width: 1px;
		}

		#d-col li.day:last-child {
			border-bottom: 1px solid rgb(32 32 32);
			border-image: linear-gradient(to right, transparent, #292929, transparent) 1;
			border-width: 1px;
		}

		/* #d-col li.day:has(+ li.bonus) .pzl_date{
			line-height:4.5rem;
		} */

		.picker-container #y-col {
			flex: 2;
		}

		.picker-container #m-col {
			flex: 3;
			border-left: 1px solid transparent;
			border-right: 1px solid transparent;
			border-image: linear-gradient(to bottom, transparent, #414141, transparent) 1;
			border-width: 1px;
		}

		.picker-container #d-col {
			flex: 10;
			touch-action: manipulation;
		}


			.picker-container #d-col .polyad {
				/* color:rgb(255 255 255 / 60%); */
				/* needs hard color */
				color:rgb(164 164 164);
			}

			.picker-container #d-col .puzzwrap {
				display: flex;
				flex-direction: row;
				width: 100%;
				padding: 0 0.5rem;
				margin: 0 0.25rem;
				justify-content: space-between;
				border: 1px solid transparent;
				border-radius:0.4rem;
			}

			.picker-container #d-col .puzzwrap:not(.broken) .pzl_title {
				cursor:pointer;
			}

			.picker-container #d-col .puzzwrap.broken .polyad {
				/* color:rgb(255 255 255 / 30%); */
				color:rgb(36 36 36);
			}

			.picker-container #y-col li,
			.picker-container #m-col li {
				cursor:pointer;
			}

				@media (hover: hover) { /* limits hover to desktop */

					.picker-container #y-col li:hover,
					.picker-container #m-col li:hover {
						color:rgb(100 100 100);
					}

					.picker-container #y-col li.active:hover,
					.picker-container #m-col li.active:hover {
						color:rgb(220 220 220);
					}

					/* .picker-container #d-col .puzzwrap:not(.broken):hover .pzl_title { */
					.picker-container #d-col .puzzwrap:not(.broken) .pzl_title:hover {
						/* border: 1px solid rgb(84, 84, 84); */
						background-color: rgb(26 26 26);
						/* consider making this for desktop only */
					}

						/* .picker-container #d-col .puzzwrap:not(.broken):hover .polyad { */
						.picker-container #d-col .puzzwrap:not(.broken) .polyad:hover {
							/* opacity: 0.8; */
							color:rgb(255 255 255 / 80%);
							/* needs hard color */
							/* color:rgb(164 164 164); */
						}
				}

				/* for mobile only */
				/* .picker-container #d-col .puzzwrap:not(.broken).tapped { */
				.picker-container #d-col .puzzwrap:not(.broken) .polyad.tapped {
					animation: tapped 0.2s;
				}

				@keyframes tapped {
					0% {	background-color: transparent; }
					10% {	background-color: rgb(32 32 32); }
					90% {	background-color: rgb(32 32 32); }
					100% {	background-color: transparent; }
				}



				.picker-container #d-col .pzl_title {
					white-space:nowrap; /* might need a marquee effect for wide puzzles */
					display:flex;
					position:relative;
					flex-grow:1;
					justify-content: center;
					border: 1px solid transparent;
					margin: 0 0.5rem;
					border-radius:0.25rem;
					align-items:center;
				}

					.pzl_title .steplets {
						position: absolute;
						left: 100%;
						top: 0;
						font-size: 1.2rem;
						font-size: 0.9rem;
						line-height: 25px;
						line-height: 1.171875rem;
					}


					.polyad.red .steplets,
					.polyad.red ~ .steplets {
						color: var(--red);
					}
					.polyad.yellow .steplets,
					.polyad.yellow ~ .steplets {
						color: var(--yellow);
					}
					.polyad.green .steplets,
					.polyad.green ~ .steplets {
						color: var(--green);
					}
					.polyad.blue .steplets,
					.polyad.blue ~ .steplets {
						color: var(--blue);
					}
					.polyad.orange .steplets,
					.polyad.orange ~ .steplets {
						color:rgb(255 159 104);
						color: var(--orange);
					}

						.pzl_title .steplets sup {
							font-size:0.6em;
						}

				.picker-container #d-col .pzl_number {
					font-weight: normal;
					float:right;
					color:rgb(100 100 100);
					min-width: 2.5rem;
					min-width: 1.875rem;
					text-align: right;
				}

				.picker-container .day {
					display: flex;
					/* flex-direction: row; */
					justify-content: space-between;
					justify-content: center;
					/* padding:0 1.5rem; */
				}

				.picker-container .day div {
					text-align: left;
				}



		.polyad {
			/* width:100%; */
			display: inline-block;
			position: relative;
			padding-right: 0.25rem;
			margin-left: 0.25rem;
			padding-right: 0.1875rem;
			margin-left: 0.1875rem;
			font-size: 1.2rem;
			font-size: 0.9rem;
			/* font-family: 'Tajawal', sans-serif; */
			/* overflow:hidden;
			text-overflow:ellipsis; */
		}

		@media only screen and (min-width: 1025px) {
			.polyad {
				font-size:1.2rem;
			}
		}
		
		.tajawal .polyad {
			font-family: 'Tajawal', sans-serif;
			font-size:1.5rem;
		}

	
	.archive.label {
		/* position: absolute; */
		position:relative;
		width: 100%;
		color: rgb(72 72 72);
		/* font-size: 2rem; */
		font-size: 1.5rem;
		text-transform: uppercase;
		text-align: center;
		margin-top: 4.5rem;
		z-index: 2000;
		display: flex;
		width: calc(100% - 2rem);
		max-width: 600px;
		letter-spacing: 0.4rem;
		letter-spacing: 0.3rem;
		font-family: "Ubuntu", sans-serif;
		font-weight: 400;
		font-style: normal;
	}
		@media only screen and (min-width:1025px) {
			.archive.label {
				margin-top: 5.5rem;
			}
		}

		.archive.label .dummy.yrs {
			margin-left: 1rem;
			margin-left: 0.75rem;
			flex:2;
		}

		.archive.label .dummy.mnths {
			flex:3;
		}

		.archive.label .dummy.dys {
			flex:10;
		}

		.btn.round.search {
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 3;
			border: none;
			background-color: transparent;
			/* transition: border 0.2s, background-color 0.2s; */
		}

		.btn.round.search:hover {
			transform:unset;
		}

		.search_bub {
			/* opacity:0; */
			position: absolute;
			z-index: 2;
			height: 2.25rem;
			width:2.25rem;
			border-radius: 2.25rem;
			bottom:0;
			right: 0;
			background-color: rgb(35 35 35);
			border: 1px solid var(--button-border);
			transition:width 0.3s cubic-bezier(0.15, 1.15, 0.3, 1), opacity 0.2s 0.05s;
			color:transparent;
		}

		.search_bub:hover {
			background-color:rgb(42 42 42);
			border: 1px solid var(--button-border-hover);
		}

		.archive.label.searching .search_bub {
			opacity:1;
			font-size:0.8em;
			padding-left:0rem;
			padding-right:2rem;
			width:15rem;
			color:white;
			transition: width 0.3s cubic-bezier(0.15, 1.15, 0.3, 1);
		}

		@media screen and (min-width: 1025px) {
			.archive.label.searching .search_bub {
				width: 25rem;
			}
		}

		.archive.label.searching .btn.round.search {
			background-color:transparent;
			border:none;
		}

		#d-col li.day.shrunk {
			height: 0;
			overflow: hidden;
			border-top:none;
		}

	.current.puzzle,
	.current.bonus {
		position: relative;
		/* width: 100%;
		width: calc(100% - 2rem);
		width: calc(100% - 1.5rem); */
		/* max-width: 600px; */
		/* width:50%; */
		max-width:480px;
		z-index: 2002;
		color: white;
		text-align:center;
		font-family: "Ubuntu", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin-top:1rem;
		display: flex;
		
		justify-content: space-evenly;
		align-items:center;
		flex-direction: column;
    	gap: 0.5rem;

		/* change to this if you bring back .withr and .paddr
		/* flex-direction:row; */
	}

		.current.puzzle .steplets,
		.bonus.puzzle .steplets {
			position: absolute;
			font-size: smaller;
			height: 100%;
			transform: translateY(-25%);
			top:0px;
			left: calc(100% + 0.5rem);
		}

		.current.puzzle .steplets sup {
			font-size:0.7em;
		}

	.current.puzzle {
		width:90%;
	}

	.current.puzzle .paddr {
		flex-grow:1;
	}

	.current.puzzle .withr {
		flex-grow:1;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items:center;
    	gap: 0.5rem;
	}

	.current.bonus {
		margin-top:1.8rem;
		width:90%;
		/* flex-grow: 1; */
    	justify-content: flex-start;
	}

		@media only screen and (min-width: 1025px) {
			.current.bonus {
				width:320px;
				max-width:unset;
			}
		}

	/* .current.bonus {
		margin-top:2.2rem;
	} */

		.current.puzzle .dummy.yrsmnths {
			flex:5;
			text-align:right;
		}

		.current.puzzle .dummy.dys {
			flex:10;
			justify-content: space-around;
			letter-spacing: normal;
			font-size: 1.2rem;
			align-items: center;
			display:flex;
			flex-direction:row;
			justify-content:space-around;
		}

		.current.bonus .dummy.dys {
			flex-direction:column;
		}
			.current.puzzle.bonus .polyad {
				background-color:rgb(8, 8, 8);
				color:rgb(255 41 117);
				color:rgb(255 41 41);
				padding:0.4rem 1rem;
				text-shadow:0 0 0.5rem #ad0000;
			}

		.bonus.label {
			color:rgb(220, 220, 220);
			font-weight:normal;
			/* margin-top:0.5rem; */
		}

		.current.date {
			color:transparent;
		}

		.current.puzzle .today {
			opacity: 0.8;
			/* font-size: 2rem; */
			font-size: 0.9em;
			font-weight:bold;
			/* text-transform: uppercase;
			letter-spacing: 0.4rem; */
		}

		.current.bonus .label {
			font-size:0.7em;
		}

		.current.puzzle .polyad {
			padding: 0.5rem 5rem;
			padding: 0.4rem 3.5rem;
			min-width: 150px;
			/* max-width: 200px;
			max-width: 9.375rem; */
			/* border: 1px solid #444444; */
			border: 1px solid rgb(150 150 150);
			border-radius: 0.4rem;
			border-radius: 0.3rem;
			white-space: nowrap;
			letter-spacing:normal;
			/* color:rgb(100 100 100); */
			cursor:pointer;
			/* display: inline; */
			/* align-items: center; */
			justify-content: center;
			color: var(--blue);
			/* text-shadow:0px 0px 0.5rem #0076b8; */
		}

		.current.puzzle .polyad:hover {
			background-color:rgb(32 32 32);
			border:1px solid rgb(164 164 164);
		}

		.current .polyad pink {
			color: var(--pink);
		}

		.current.puzzle .sequence {
			font-size:0.9em;
		}

		.current.puzzle .todate {
			font-size:0.7em;
			/* margin: 0.5rem 0; */
		}
		
		div:has(.current.period) .num {
			font-size: 0.8em;
		}

		/* .current.period {
			font-size:0.8em;
		} */

		.current.bonus .btn {
			background-size:contain;
			background-size:76%;
			background-position:center;
			background-repeat:no-repeat;
		}

		/* .current.bonus.zygo .btn,
		.current.bonus.compound {
			background-image: url(../images/zygogram-icon.png);
		}

		.current.bonus.camo .btn {
			background-image: url(../images/camogram-icon.png);
		}

		.current.bonus.poly .btn {
			background-image: url(../images/polygram-icon.png);
		} */

		.current.puzzle {
			transition: transform 0.3s ease;
		}

		.current.puzzle.ask {
			transform:translateX(-120%);
		}
		
		.current.puzzle.ask.more {
			transform:translateX(-240%);
		}

		.current.puzzle.more {
			transform:translateX(-120%);
		}

		.bonus .explain {
			position: absolute;
			font-size: 1rem;
			width: 100%;
			height:100%;
			left: 120%;
			opacity:0;
			transition: opacity 0.3s ease;
			top:0;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap:1rem;
			justify-content: flex-start;
    		padding: 1rem 0 3rem 0;
		}

		.bonus .explain.more {
			left:120%;
		}

		.bonus.compound.ask .explain.compound,
		.bonus.zygo.ask .explain.zygo,
		.bonus.poly.ask .explain.poly,
		.bonus.camo.ask .explain.camo,
		.bonus.camo.ask.more .explain.more {
			opacity:1;
		}

		.current.bonus.ask .explain.more {
			opacity:0;
			/* overflow-y: auto; */
    		height: 100%;
			display: flex;
			/* trick to get content higher */
    		/* flex-direction: column-reverse; */
			/* justify-content: space-between; */
			/* justify-content: flex-end; */
			justify-content:flex-start;
			transform: translateY(-100%);
		}

		.explain.more {
			overflow-y:visible;
		}

		/* .explain.more .uppity {
			display:flex;
		} */

		@media only screen and (min-width:1025px) {
			.bonus .explain {
				width: 480px;
				left: 360px;
			}
			.bonus .explain.more {
				left: 540px;
			}

			.current.puzzle.ask {
				transform:translateX(-440px);
			}

			.current.puzzle.ask.more {
				transform:translateX(-978px); /* borders? */
			}
		}

		.puzzle_picker .camogap {
			display:inline-block;
			width:2rem;
		}



		.bonus dim {
			opacity:0.7;
		}

		.bonus .helps {
			gap:3rem;
		}

		button.gotit,
		button.back,
		button.elaborate {
			padding: 0.2rem 1rem;
			background-color: #4b4b4b7d;
			border: 1px solid #4b4b4b;
			outline: none;
			border-radius: 0.2rem;
			color: #00ffa3;
			font-size: 1.3em;
			cursor:pointer;
		}





/* <dialog> caused more problems than i was willing to deal with.
	might revisit... might not  */
dialog {
	border: none;
    outline: none;
    padding: 0;
    background: transparent;
	overflow:hidden;
    max-height: 90dvh;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6); /* Use hardcoded RGBA */
  background-color: rgba(0, 0, 0, 0.7); /* Slightly darker for better contrast */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%);
  /* Ensure the backdrop doesn't pop in instantly */
  opacity: 0;
  transition: opacity 0.3s ease;
}

dialog[open]::backdrop {
  opacity:1;
}

dialog[open] {
  animation: appear 0.3s ease-out forwards;
}

@keyframes appear {
  0% {
    opacity: 0;
    transform: translateY(-20px); /* Better performance than margin-top */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Positioning "Above Center" */
dialog.custom-modal[data-modal="picker"] {
  margin-top: 15dvh; /* Push down slightly from the top */
  margin-bottom: auto; /* Keeps the bottom margin flexible */
}