/* loot-legacy.com "coming soon" page (index.html). */
:root {
	--gold: #ffc740;          /* GoldDrop.COIN_COLOR, Color(1.0, 0.78, 0.25) */
	--gold-deep: #c98a1a;
	--ink: #000;
	--muted: rgba(255, 255, 255, 0.55);
	color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	background: var(--ink);
	color: #fff;
	font-family: "Bubblegum Sans", system-ui, sans-serif;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}


/* A 16:9 box the size of the rendered clip; overlays use percentages of it. On a tall phone it's
   wider than the screen (the edges are only dark floor), so the chest stays a decent size. */
.stage {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(100vw, 100svh * 16 / 9);
	aspect-ratio: 16 / 9;
}
@media (max-aspect-ratio: 1 / 1) {
	.stage { width: min(175vw, 100svh * 16 / 9); }
}

.stage > video,
.stage > img,
.stage > canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	/* Fade the clip's edges into the page, so its frame never shows as a line. */
	-webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
	mask-image: radial-gradient(closest-side, #000 72%, transparent);
}
.stage > [hidden] { display: none; }

/* The button sits on the dark floor below the chest, where the game's loading bar is. */
.open-button {
	position: absolute;
	left: 50%;
	top: 80%;
	transform: translate(-50%, -50%);
	font: inherit;
	font-size: clamp(22px, 3.2vw, 44px);
	letter-spacing: 0.04em;
	color: var(--gold);
	background: rgba(20, 14, 6, 0.72);
	border: 2px solid var(--gold-deep);
	border-radius: 999px;
	padding: 0.35em 1.3em 0.4em;
	cursor: pointer;
	text-shadow: 0 0 12px rgba(255, 199, 64, 0.45);
	box-shadow: 0 0 0 0 rgba(255, 199, 64, 0.35);
	animation: beckon 2.2s ease-in-out infinite;
	transition: opacity 0.25s ease, transform 0.25s ease;
	white-space: nowrap;
}
@media (max-aspect-ratio: 1 / 1) {
	.stage .reveal p { font-size: 17px; top: 112%; }
	.open-button { font-size: clamp(22px, 6.5vw, 36px); }
}
.open-button:hover,
.open-button:focus-visible {
	color: #fff3c9;
	border-color: var(--gold);
	outline: none;
}
.open-button:focus-visible { box-shadow: 0 0 0 4px rgba(255, 199, 64, 0.5); }
.open-button[hidden] { display: block; opacity: 0; pointer-events: none; transform: translate(-50%, -30%); }

@keyframes beckon {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 199, 64, 0.0); }
	50%      { box-shadow: 0 0 28px 2px rgba(255, 199, 64, 0.28); }
}

/* "Coming soon..." rises out of the chest's mouth as it bursts open. */
.reveal h1 {
	position: absolute;
	left: 50%;
	top: 3%;
	width: max-content;
	max-width: 100vw;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 1.6em) scale(0.3);
	margin: 0;
	font-weight: 400;
	font-size: clamp(40px, 7vw, 104px);
	line-height: 1;
	color: var(--gold);
	text-shadow: 0 0 24px rgba(255, 199, 64, 0.55), 0 3px 0 #7a4d08;
}
.reveal.shown h1 {
	animation: rise 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
@media (max-aspect-ratio: 1 / 1) {
	/* The stage is only ~a screen wide and short here: the headline goes above it. */
	.reveal h1 { font-size: clamp(40px, 13vw, 80px); top: -22%; }
}
.reveal p {
	position: absolute;
	left: 50%;
	top: 91%;
	transform: translate(-50%, -50%);
	width: min(44em, 100vw);
	text-shadow: 0 0 6px #000, 0 0 14px #000;
	margin: 0;
	text-align: center;
	pointer-events: none;
	padding: 0 16px;
	font-size: clamp(15px, 1.5vw, 21px);
	color: var(--muted);
	opacity: 0;
}
.reveal.shown p { animation: fade 0.8s ease 0.9s forwards; }

@keyframes rise {
	to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes fade { to { opacity: 1; } }

footer {
	position: fixed;
	bottom: 12px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	.open-button { animation: none; }
	.reveal.shown h1, .reveal.shown p { animation-duration: 0.01s; animation-delay: 0s; }
}