:root{
	--bg: linear-gradient(180deg, #fcd68c, #b4a078);
	--accent: #1b6ef6; 
	--button-bg: #fbe5a3;
	--button-border: #e4b23d;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background: var(--bg);
	display:flex;
	align-items:center;
	justify-content:center;
}

.stage{
	text-align:center;
	width:100%;
	max-width:900px;
	padding:48px 24px;
}

#hero{
	max-width:60%;
	height:auto;
	display:block;
	margin:0 auto 28px auto;
	filter: drop-shadow(0 18px 30px rgba(20,30,60,0.12));
}

.wii-button{
	--pad: 18px 40px;
	background: linear-gradient(180deg, #fbdd8c, #f4f89c);
	border: 1px solid var(--button-border);
	padding:var(--pad);
	border-radius:999px;
	font-size:20px;
	font-weight:600;
	color:#0b2340;
	cursor:pointer;
	box-shadow: 0 6px 18px rgba(20,30,60,0.12), inset 0 -6px 18px rgba(0,0,0,0.02);
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.wii-button:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,30,60,0.14)}
.wii-button:active{ transform: translateY(0); box-shadow: 0 6px 18px rgba(20,30,60,0.12)}
.wii-button:focus{ outline: 3px solid rgba(27,110,246,0.18); outline-offset:4px }

@media (max-width:520px){
	#hero{ max-width:80% }
	.wii-button{ font-size:18px; padding:14px 28px }
}

#bg-audio{
	display:block;
	margin:18px auto 0 auto;
	max-width:420px;
	width:60%;
}

@media (max-width:520px){
    #bg-audio{ width:90%; max-width:320px }
}