html {
	font-family: Bebas Nue;
	background: transparent;
	height: 100%;
}

/* Accent color controls for image-based buttons */
:root {
    /* PLAY NOW color (dark grey) */
    --playnow-hue: 0deg;
    --playnow-sat: 0;      /* remove color */
    --playnow-bright: 0.48; /* darken */
    /* MORE FEATURES color (dark grey) */
    --more-hue: 0deg;
    --more-sat: 0;         /* remove color */
    --more-bright: 0.48;   /* darken */
    /* FORUMS/DISCORD button color (dark grey) */
    --forums-hue: 0deg;
    --forums-sat: 0;       /* remove color */
    --forums-bright: 0.48; /* darken */
    /* Discord ribbon (dark grey) */
    --discord-hue: 0deg;
    --discord-sat: 0;      /* remove color */
    --discord-bright: 0.55; /* keep text a touch brighter */
}

/* Convenience tokens */
:root {
    --playnow-filter: hue-rotate(var(--playnow-hue)) saturate(var(--playnow-sat)) brightness(var(--playnow-bright));
    --more-filter: hue-rotate(var(--more-hue)) saturate(var(--more-sat)) brightness(var(--more-bright));
    --forums-filter: hue-rotate(var(--forums-hue)) saturate(var(--forums-sat)) brightness(var(--forums-bright));
    --discord-filter: hue-rotate(var(--discord-hue)) saturate(var(--discord-sat)) brightness(var(--discord-bright));
}

body {
	background: url('../images/bg.png') center center no-repeat;
	/* shift background UP in the image (visually down on screen) */
	background-position: center 10%;
	background-size: cover;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 9999;
	/* allow vertical scroll so content isn't clipped on ultra-wide */
	overflow-x: hidden;
	overflow-y: auto;
	text-align: center;
}



#video-bg {
	position: absolute;
	width: 100%;
	height: 100vh;
	z-index: -1;
}

#video-bg #strain-video {
	position: fixed;
	top: 45%;
	left: 50%;
	width: 150%;
	height: 114vh;
	transform: translate(-50%, -50%);
}


#content {
	background: rgba(0, 0, 0, 0.25);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
}

#audio {
	position: absolute;
	width: 12vw;
	bottom: 0.5vw;
	left: 0.5vw;
}

#logo {
    background: url('../images/logo.png') center center no-repeat;
    background-size: contain; /* prevent cropping of the logo */
    width: 22vw;
    aspect-ratio: 1 / 1; /* keep container square to image */
    margin: 5vw auto 0 auto;
    animation: pulse 3s infinite;
    filter: drop-shadow(0 0 2vw rgba(15, 6, 5, 1));
}

#countdown-container {
	background: url('../images/countdown1.png') center center no-repeat;
	position: absolute;
	top: 0;
	left: 100px;
	padding: 50px;
	text-align: center;
	width: 400px;
	height: 300px;
	box-sizing: border-box;
	background-size: 70% 100%;
}

#countdown {
	font-size: 20px;
	font-weight: bold;
	color: #e7bc78;
	letter-spacing: 2px;
	transition: 0.3s;
	font-family: Trajan Pro;
	font-weight: 600;
	margin-top: 110px;
	margin-bottom: 20px;
}

#opening-text {
	display: none;
}

#opening-date {
	border: none;
	outline: none;
	color: #e7bc78;
	font-size: 15px;
	letter-spacing: 2px;
	cursor: pointer;
	transition: 0.3s;
	font-family: Trajan Pro;
	font-weight: 600;
}

@media only screen and (max-width: 600px) {
	#countdown-container {
		background: none;
		position: absolute;
		top: 38%;
		left: 10px;
		padding: 20px;
		text-align: center;
		width: calc(100% - 20px);
		box-sizing: border-box;
		white-space: nowrap;
	}

	#countdown {
		background: none;
		font-size: 28px;
		color: #d4a455;
		margin-top: 20px;
	}

	#opening-text {
		display: block;
		border: none;
		outline: none;
		text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
		color: #d4a455;
		font-size: 30px;
		letter-spacing: 2px;
		cursor: pointer;
		transition: 0.3s;
		font-family: Trajan Pro;
		font-weight: 600;
		margin-top: 30px;
	}

	#opening-date {
		color: #d4a455;
		display: none;
	}
}

#timer-text table {
	position: absolute;
	top: 67%;
	width: 82%;
	margin-left: 8.5%;
}

#timer-text table td {
	width: 25%;
	font-size: 0.35vw;
	text-align: center;
}

#timer {
	width: 80%;
	position: absolute;
	top: 54%;
	left: 50%;
	transform: translate(-50%, 0);
	display: flex;
}

#timer div {
	width: 25%;
	padding: 0.4vw 0.2vw;
	border-radius: 0.2vw;
	margin: 0 0.2vw;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 50, 50, 0.6);
	color: rgba(255, 200, 80, 1);
	font-size: 0.8vw;
	font-weight: 600;
	text-shadow: 0 0 0.8vw rgba(255, 0, 0, 1);
}

#flags {
	position: absolute;
	top: 1vw;
	right: 5vw;
	display: flex;
}

@keyframes movedown {
	from {
		top: -16.5vw;
	}

	to {
		top: 0;
	}
}

.flag_feature {
	background: url(../images/flag.png) center center no-repeat;
	background-size: cover;
	width: 6.7vw;
	height: 16.5vw;
	image-rendering: pixelated;
	font-family: Trajan Pro;
	color: rgba(255, 255, 255, 1);
	font-size: 0.6vw;
	padding-top: 3vw;
	font-size: 0.5vw;
	margin: 0 0.5vw;
	position: relative;
	top: -17.5vw;
}

.flag_feature img {
	width: 1.4vw;
	border-radius: 50%;
	border: 0.1vw solid rgba(255, 210, 50, 1);
	box-shadow: 0 0 1vw rgba(255, 80, 30, 1);
}

.flag_feature span {
	font-size: 0.8vw;
	color: rgba(255, 210, 50, 1);
	text-shadow: 0 0 0.8vw rgba(255, 100, 50, 1);
	filter: drop-shadow(0 0 0.05vw rgba(160, 60, 0, 1));
}

.flag_feature .bottom {
	width: 100%;
	position: absolute;
	left: 50%;
	bottom: 3.8vw;
	transform: translate(-50%, 0);
}

.flag_feature .center {
	width: 100%;
	position: absolute;
	top: 47%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#features {
	background: url(../images/wood.png) center center no-repeat;
	background-size: cover;
	width: 25vw;
	height: 20.9vw;
	position: absolute;
	top: 0vw;
	right: 5vw;
	image-rendering: pixelated;
	font-family: Trajan Pro;
	color: rgba(255, 255, 255, 1);
	font-size: 0.6vw;
	animation: slideInDown 1s 1;
	display: none;
}

#features table {
	width: 90%;
	margin-left: 7%;
	max-height: 12vw;
	margin-top: 7.4vw;
}


#features table td.icon img {
	width: 1.2vw;
}

#features table td {
	text-align: left;
}

#features table td span {
	color: rgba(255, 200, 50, 1);
	text-shadow: 0 0 0.6vw rgba(255, 50, 50, 1);
}

.btn-more-features {
    position: relative;
    background: none;
    width: 9vw;
    height: 2.03vw;
    line-height: 2vw;
    border: none;
    outline: none;
	text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 1);
	font-size: 0.65vw;
	cursor: pointer;
    transition: 0.3s;
    font-family: Trajan Pro;
    font-weight: 600;
    margin: 0.4vw 0;
}

.btn-more-features::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/more-features.png') center center no-repeat;
    background-size: cover;
    filter: var(--more-filter);
    pointer-events: none;
    z-index: -1;
}

.btn-more-features:hover { transform: scale(0.95); filter: drop-shadow(0 0 1.5vw rgba(155, 55, 15, 1)); }
.btn-more-features:hover::before { filter: var(--more-filter) saturate(1.5) brightness(1.4); }

.btn-more-features-mobile {
    display: none;
}

.btn-more-features-mobile:hover {
    transform: scale(0.85);
    filter: var(--more-filter) saturate(1.5) brightness(1.4) drop-shadow(0 0 1.5vw rgba(155, 55, 15, 1));
}

.btn-more-features-big {
    position: relative;
    background: none;
    width: 12vw;
    height: 2.7vw;
    line-height: 2.7vw;
    border: none;
    outline: none;
	text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 1);
	font-size: 0.9vw;
	cursor: pointer;
    transition: 0.3s;
    font-family: Trajan Pro;
    font-weight: 600;
    margin: 0.4vw 0;
}

.btn-more-features-big::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/more-features.png') center center no-repeat;
    background-size: cover;
    filter: var(--more-filter);
    pointer-events: none;
    z-index: -1;
}

.btn-more-features-big:hover { transform: scale(0.95); filter: drop-shadow(0 0 1.5vw rgba(155, 55, 15, 1)); }
.btn-more-features-big:hover::before { filter: var(--more-filter) saturate(1.5) brightness(1.4); }

#discord-btn {
    width: 2.5vw;
    top: 40%;
    right: 0.5vw;
    position: absolute;
    animation: backInRight 1s 1;
    transition: 0.3s;
    z-index: 10;
    filter: var(--discord-filter);
}

#discord-btn:hover {
    transform: scale(1.1);
    filter: var(--discord-filter) drop-shadow(0 0 1vw rgba(80, 80, 255, 0.5));
}

#discord {
	width: 15vw;
	height: 15vw;
	position: absolute;
	top: 60%;
	right: 10vw;
	transform: translate(0, -50%);
}

#discord iframe {
	width: 100%;
	height: 100%;
}

#buttons {
    width: 40%;
    /* bring buttons closer to the logo on desktop */
    margin: 2.5vw auto 0 auto;
    text-align: center;
    z-index: 30;
    position: relative;
}

#buttons .playnow {
    position: relative;
    background: none;
    width: 14vw;
    height: 3vw;
    line-height: 3vw;
    border: none;
    outline: none;
	text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 1);
	font-size: 1vw;
	letter-spacing: 2px;
	cursor: pointer;
	transition: 0.3s;
    font-family: Trajan Pro;
    font-weight: 600;
    margin: 0.5vw 0;
    z-index: 50;
}

#buttons .playnow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/playnow.png') center center no-repeat;
    background-size: cover;
    filter: var(--playnow-filter);
    pointer-events: none;
    z-index: -1;
}

#buttons .playnow:hover { transform: scale(0.95); filter: drop-shadow(0 0 1.5vw rgba(155, 55, 15, 1)); }
#buttons .playnow:hover::before { filter: var(--playnow-filter) saturate(1.5) brightness(1.4); }

/* Vote button (desktop) */
#buttons .btn-vote {
    position: relative;
    background: none;
    width: 12vw;
    height: 2.7vw;
    line-height: 2.7vw;
    border: none;
    outline: none;
    text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 1);
    font-size: 0.9vw;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.3s;
    font-family: Trajan Pro;
    font-weight: 600;
    margin: 0.4vw 0;
}

#buttons .btn-vote::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/more-features.png') center center no-repeat;
    background-size: cover;
    filter: var(--more-filter);
    pointer-events: none;
    z-index: -1;
}

#buttons .btn-vote:hover { transform: scale(0.95); filter: drop-shadow(0 0 1.5vw rgba(155, 55, 15, 1)); }
#buttons .btn-vote:hover::before { filter: var(--more-filter) saturate(1.5) brightness(1.4); }

#buttons .forums {
    position: relative;
    background: none;
    width: 12vw;
    height: 2.7vw;
    line-height: 2.7vw;
    border: none;
    outline: none;
	text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 1);
	font-size: 0.9vw;
	cursor: pointer;
    transition: 0.3s;
    font-family: Trajan Pro;
    font-weight: 600;
    margin: 0.4vw 0;
}

#buttons .forums::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/forums.png') center center no-repeat;
    background-size: cover;
    filter: var(--forums-filter);
    pointer-events: none;
    z-index: -1;
}

#buttons .forums:hover { transform: scale(0.95); filter: drop-shadow(0 0 1.5vw rgba(155, 35, 15, 1)); }
#buttons .forums:hover::before { filter: var(--forums-filter) saturate(1.5) brightness(1.4); }

#votes {
	width: 30%;
	margin: 1vw auto 0 auto;
	text-align: center;
	display: none;
}

.vote-btn {
	background: url('../images/vote-btn.png') center center no-repeat;
	background-size: cover;
	width: 11vw;
	height: 2.8vw;
	line-height: 3.4vw;
	border: none;
	outline: none;
	text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 1);
	font-size: 1vw;
	letter-spacing: 2px;
	cursor: pointer;
	transition: 0.3s;
	font-family: Trajan Pro;
	font-weight: 600;
	margin: 0 0.5vw;
	z-index: 50;
	position: relative;
	text-align: left;
	padding-left: 3vw;
	color: rgba(255, 190, 80, 1);
}

.vote-btn img {
	position: absolute;
	width: 2vw;
	top: 50%;
	left: 0.5vw;
	transform: translate(0, -50%);
}

.vote-btn #vote-on {
	position: absolute;
	font-size: 0.4vw;
	top: -0.8vw;
	left: 3vw;
	color: rgba(255, 255, 255, 1);
}

.vote-btn:hover {
	background: url('../images/vote-btn-h.png') center center no-repeat;
	background-size: cover;
	transform: scale(0.9);
	filter: drop-shadow(0 0 1.5vw rgba(255, 30, 0, 0.5));
}

#footer {
	background: linear-gradient(0deg, rgba(15, 7, 5, 1) -10%, transparent 100%);
	height: 15vw;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: -1;
}

#footer #text {
	height: 3vw;
	width: 40%;
	margin: 11.5vw auto 0 auto;
	padding: 0 auto;
	text-align: center;
}

#footer #text h2 {
	font: 0.5vw 'Arial';
	color: #ffc74a;
	height: 0.4vw;
	padding-top: 0.5vw;
}

#footer #text h3 {
	font: 0.35vw 'Arial';
	color: #9b7a62;
}

#strain {
	background: url('../images/strain.png') center center no-repeat;
	background-size: cover;
	width: 3.5vw;
	height: 1.35vw;
	position: absolute;
	bottom: 0.8vw;
	right: 1vw;
	animation: pulse 4s infinite;
	cursor: pointer;
}

/* Features Modal */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    z-index: 100000; /* above other overlays */
    align-items: center;
    justify-content: center;
    padding: 2vw;
}
.modal-overlay.open { display: flex; }
.modal-dialog {
    background: linear-gradient(180deg, rgba(20,15,12,0.98) 0%, rgba(12,9,7,0.98) 100%);
    border: 1px solid rgba(231, 188, 120, 0.35);
    border-radius: 0.6vw;
    box-shadow: 0 0 2vw rgba(0,0,0,0.8), inset 0 0 1.2vw rgba(231,188,120,0.08);
    width: min(900px, 92vw);
    max-height: 82vh;
    overflow: auto;
    padding: 1.6vw 2vw;
    position: relative;
}
.modal-body { 
    text-align: left; 
    color: #e8e2d9; 
    font-family: Georgia, 'Times New Roman', serif; 
    font-size: 16px; 
    line-height: 1.6; 
}
.modal-body h2 { color: #e7bc78; font: 28px 'Trajan Pro'; margin: 0 0 0.6em 0; }
.modal-body h3 { color: #d4a455; font: 20px 'Trajan Pro'; margin: 1.2em 0 0.4em; }
.modal-body ul { margin: 0.3em 0 0.8em 1.2em; }
.modal-body li { margin: 0.25em 0; }
.modal-close {
    position: absolute;
    top: 0.4vw;
    right: 0.6vw;
    border: none;
    background: transparent;
    color: #e7bc78;
    font-size: 2vw;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.modal-close:hover { transform: scale(1.1); }

/* Vote modal cards */
.modal-body .vote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}
.modal-body .vote-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #e7bc78;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(231,188,120,0.2);
    border-radius: 8px;
    padding: 12px;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.modal-body .vote-card img {
    height: 100px;
    width: auto;
    max-width: 100%;
    display: block;
}
.modal-body .vote-card span {
    display: block;
    margin-top: 8px;
    font-family: 'Trajan Pro';
    font-size: 14px;
    color: #e7bc78;
}
.modal-body .vote-card:hover { transform: translateY(-2px); filter: drop-shadow(0 0 0.8vw rgba(155, 55, 15, 0.6)); }


@media screen and (max-width: 600px) {
	body { background-position: center 35% !important; }
	#video-bg #strain-video {
		width: auto !important;
		height: 110vh !important;
		top: 48% !important;
	}

	#logo-splash,
	#strain,
	#audio,
	#corners,
	#features,
	#discord-btn,
	#flags,
	.btn-more-features-big {
		display: none !important;
	}

	#content {
		width: 100% !important;
		min-height: 105vh !important;
		height: auto !important;
	}


	#logo {
		position: relative;
		width: 90vw;
		aspect-ratio: 1 / 1; /* keep square on mobile */
		margin: 0 auto;
		top: 40px
	}

	#timer-text table td {
		font-size: 1.2vw;
	}

	#timer div {
		padding: 0.7vw 0.3vw;
		font-size: 3vw;
	}


	#buttons {
		position: fixed;
		width: 80%;
		margin: auto;
		bottom: 100px;
		/* Adjust bottom margin as needed */
		left: 0;
		right: 0;
		text-align: center;
	}

	#buttons .playnow {
		width: 65vw;
		height: 14.6vw;
		line-height: 14.6vw;
		font-size: 5vw;
		margin-bottom: 2vw;
		background: none;
		position: relative;
	}

	#buttons .playnow::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url('../images/playnow.png') center center no-repeat;
		background-size: cover;
		filter: var(--playnow-filter);
		pointer-events: none;
		z-index: -1;
	}

	#buttons .forums {
		width: 55vw;
		height: 12.4vw;
		line-height: 12.4vw;
		font-size: 4vw;
		margin-bottom: 2vw;
	}

	#buttons .forums {
		background: none;
		position: relative;
	}

	#buttons .forums::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url('../images/forums.png') center center no-repeat;
		background-size: cover;
		filter: var(--forums-filter);
		pointer-events: none;
		z-index: -1;
	}

	.btn-more-features-mobile {
		position: relative;
		background: none;
		width: 55vw;
		height: 12.4vw;
		line-height: 12.4vw;
		border: none;
		outline: none;
		text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
		color: rgba(255, 255, 255, 1);
		font-size: 4vw;
		cursor: pointer;
		transition: 0.3s;
		font-family: Trajan Pro;
		font-weight: 600;
		margin: 0.4vw 0;
		display: initial !important;
	}

	.btn-more-features-mobile::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url('../images/more-features.png') center center no-repeat;
		background-size: cover;
		filter: var(--more-filter);
		pointer-events: none;
		z-index: -1;
	}

	/* Vote button (mobile) */
	#buttons .btn-vote {
		position: relative;
		background: none;
		width: 55vw;
		height: 12.4vw;
		line-height: 12.4vw;
		border: none;
		outline: none;
		text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
		color: rgba(255, 255, 255, 1);
		font-size: 4vw;
		cursor: pointer;
		transition: 0.3s;
		font-family: Trajan Pro;
		font-weight: 600;
		margin-bottom: 2vw;
	}

	#buttons .btn-vote::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url('../images/more-features.png') center center no-repeat;
		background-size: cover;
		filter: var(--more-filter);
		pointer-events: none;
		z-index: -1;
	}

	#votes {
		width: 100%;
		margin: 1vw auto 0 auto;
		text-align: center;
	}

	.vote-btn {
		width: 40vw;
		height: 10.3vw;
		line-height: 13vw;
		font-size: 3.5vw;
		padding-left: 11vw;
	}

	.vote-btn img {
		width: 8vw;
		top: 50%;
		left: 1.5vw;
	}

	.vote-btn #vote-on {
		font-size: 1.5vw;
		top: -3vw;
		left: 11.5vw;
	}

	#footer {
		background: linear-gradient(0deg, rgba(15, 7, 5, 1) 0%, transparent 100%);
		height: 25vw;
	}


	#footer #text {
		height: 3vw;
		width: 90% !important;
		margin: 5vh auto 0 auto !important;
		padding: 0 auto;
		text-align: center;
	}

	#footer #text h2 {
		font: 9px 'Arial';
		color: #ffc74a;
		height: 9px;
	}

	#footer #text h3 {
		font: 7px 'Arial';
		color: #9b7a62;
	}

	/* Modal adjustments on mobile */
	.modal-dialog { width: 94vw; max-height: 86vh; padding: 16px; border-radius: 8px; }
	.modal-body { font-size: 15px; }
	.modal-body h2 { font-size: 24px; }
	.modal-body h3 { font-size: 18px; }

}


/* Ultra-wide adjustments (21:9 and wider) */
@media screen and (min-width: 2000px) and (min-aspect-ratio: 21/9) {
    /* tighten vertical spacing so all buttons fit without cutting off */
    #logo { margin: 6vh auto 0 auto; }
    #buttons { margin: 2vh auto 0 auto; }
}




/* FACEBOOK POP UP */
#fanback {
	display: none;
	background: rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
}

#fan-exit {
	width: 100%;
	height: 100%;
}

#fanbox {
	background: white;
	width: 520px;
	height: 450px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 0.3vw;
}

#fanclose {
	float: right;
	cursor: pointer;
	background: url(../images/fanclose.png) repeat;
	height: 15px;
	padding: 20px;
	position: relative;
	padding-right: 40px;
	margin-top: -20px;
	margin-right: -22px;
}

#linkit a.visited,
#linkit a,
#linkit a:hover {
	color: #80808B;
	font-size: 10px;
	margin: 0 auto 5px auto;
	float: center;
}

@media (max-width: 600px) {
	.hide-on-mobile {
		display: none;
	}

	#fanback {
		display: none;
		background: none;
	}

	#fanbox {
		display: none;
	}

}

/* Modal link styling */
.modal-body a{ color:#e7bc78; text-decoration:underline; }
.modal-body a:hover{ color:#ffd695; }

/* --- Keep modal close button visible on mobile --- */
.modal-dialog {
  position: relative;
  padding-top: 48px; /* space for close button */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-close {
  position: fixed;
  top: 8px;
  right: 12px;
  z-index: 100001;
  background: rgba(20,15,12,0.95);
  border: 1px solid rgba(231,188,120,0.3);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 24px;
  line-height: 1;
  color: #e7bc78;
}

/* Countdown container */
  #countdown {
    position: fixed; /* stays at top */
    top: 20px;
    left: 20px;
    z-index: 9999;
    font-size: 1.5em;
    font-weight: bold;
    padding: 1em 2em;
    background: linear-gradient(135deg, #1a1a1a, #333);
    border-radius: 12px;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    text-align: center;
  }

  #time {
    color: #00ff00; /* countdown numbers */
    display: block;
    margin-top: 0.2em;
  }

  #server-opening {
    font-size: 0.9em;
    color: #ffcc00;
    display: block;
    margin-top: 0.2em;
  }

  /* Mobile adjustments */
  @media (max-width: 768px) {
    #countdown {
      left: 50%;
      top: 10px;
      transform: translateX(-50%);
      padding: 0.8em 1.5em;
      font-size: 1.2em;
    }
  }