html, body {
	padding: 0;
	margin: 0;
	overflow: hidden;
	
	background: #000000;
	color: white;
}

html, body, canvas {
	touch-action: none;
	touch-action-delay: none;
}

#opening-screen {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0 16px;
overflow: auto;
background: #000000;
touch-action: manipulation;
pointer-events: auto;
opacity: 1;
transition: opacity 180ms ease;
}

#opening-screen.is-leaving {
opacity: 0;
pointer-events: none;
}

.opening-screen__card {
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: min(100%, 675px);
height: 100vh;
height: 100dvh;
overflow: hidden;
padding: 0 18px;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 24px;
background-color: #f8f7f1;
background-image: url("images/tiledbackground2-sheet0.png");
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
box-shadow: 0 18px 42px rgba(7, 32, 70, 0.28);
}

@media (min-aspect-ratio: 4/5) and (min-height: 700px) {
	.opening-screen__card {
		background-size: 100% 100%;
	}
}

.opening-screen__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(14px, 2.8vh, 22px);
width: 100%;
max-width: 480px;
}

.opening-screen__float-layer {
position: absolute;
inset: 1px;
z-index: 2;
overflow: hidden;
pointer-events: none;
}

.opening-screen__float {
position: absolute;
top: 0;
left: 0;
display: block;
height: auto;
object-fit: contain;
opacity: 0.9;
filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.28));
will-change: transform;
}

.opening-screen__float-layer.is-moving .opening-screen__float {
transition: transform 3.6s ease-in-out;
}

.opening-screen__float--dog,
.opening-screen__float--cat {
width: clamp(54px, 16vw, 88px);
}

.opening-screen__float--cookie,
.opening-screen__float--burger {
width: clamp(42px, 14vw, 70px);
}

.opening-screen__float--flower {
width: clamp(66px, 22vw, 110px);
}

.opening-screen__start-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
}

.opening-screen__sprite {
flex: 0 0 43px;
width: 43px;
height: 96.5px;
background-image: url("images/player3-sheet0.png");
background-repeat: no-repeat;
background-size: 256px 256px;
animation: opening-player3-loop 960ms steps(1, end) infinite;
}

@keyframes opening-player3-loop {
0% { background-position: -64.5px -0.5px; }
12.5% { background-position: -128.5px -0.5px; }
25% { background-position: -192.5px -0.5px; }
37.5% { background-position: -132.5px -128.5px; }
50% { background-position: -192.5px -128.5px; }
62.5% { background-position: -0.5px -128.5px; }
75% { background-position: -44.5px -128.5px; }
87.5% { background-position: -88.5px -128.5px; }
100% { background-position: -64.5px -0.5px; }
}

@media (prefers-reduced-motion: reduce) {
.opening-screen__float-layer.is-moving .opening-screen__float {
transition: none;
}

.opening-screen__sprite {
animation: none;
background-position: -64.5px -0.5px;
}
}

.opening-screen__artwork {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(14px, 2.8vh, 22px);
transform: translateY(-52px);
}

.opening-screen__fanid {
display: block;
width: clamp(108px, 18vh, 154px);
height: auto;
object-fit: contain;
transform: translateY(-24px);
}

.opening-screen__event {
display: block;
width: min(420px, 100%);
max-height: 32vh;
height: auto;
object-fit: contain;
}

.opening-screen__start {
min-width: 190px;
border: 0;
border-radius: 999px;
padding: 13px 24px;
background: #174f89;
box-shadow: 0 5px 0 #0d3f73;
color: #ffffff;
font: 700 clamp(17px, 4.4vw, 20px)/1.2 system-ui, sans-serif;
cursor: pointer;
touch-action: manipulation;
transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.opening-screen__start:hover:not(:disabled) {
background: #0f447b;
}

.opening-screen__start:active:not(:disabled) {
transform: translateY(3px);
box-shadow: 0 2px 0 #0d3f73;
}

.opening-screen__start:focus-visible {
outline: 3px solid #40c8df;
outline-offset: 4px;
}

.opening-screen__start:disabled {
cursor: wait;
opacity: 0.72;
}

.game-back-button {
position: fixed;
z-index: 10001;
display: grid;
place-items: center;
box-sizing: border-box;
width: 34px;
height: 30px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 7px;
background: rgba(20, 42, 68, 0.9);
color: #ffffff;
font: 700 20px/1 system-ui, sans-serif;
cursor: pointer;
touch-action: manipulation;
}

.game-back-button:hover {
background: #0d3158;
}

.game-back-button:focus-visible {
outline: 2px solid #40c8df;
outline-offset: 2px;
}