body {
	transition: background-color 0.6s ease;
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

}

html.door-scroll-locked,
body.door-scroll-locked,
body:not(.door-entered) {
	overflow: hidden;
	touch-action: none;
}

body.door-intro-active {
}

.door-intro-active .game-shell,
.door-intro-active .overlay {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

body.door-locked .game-shell,
body.door-locked .overlay {
	display: none;
}

body:not(.door-intro-active) .game-shell,
body:not(.door-intro-active) .overlay {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease 0.1s;
}

.door-stage {
	position: fixed;
	height: 100vh;	
    width: 100vw;
	inset: 0;
	/* background: radial-gradient(circle at top, rgba(12, 29, 25, 0.95), rgba(5, 13, 11, 0.98)); */
	/* background-color: brown; */
	transition: background-color 0.6s ease;
	background-color: #7e2218;
	background-image: url(tuer_bg.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100vh;
	/* display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: min(4vmin, 32px); */
	z-index: 40;
	color: #f5f7f0;
	transition: opacity 0.6s ease, transform 4s ease;
}

.door-stage-bg-color-hidden {
	background-color: transparent;
}

.door-stage--hidden {
	opacity: 0;
	pointer-events: none;
}

.door-backdrop {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -53%);
    width: 25vh;
    height: 23vh;
	transform-origin: center;
	/* transition: transform 1.1s ease, opacity 0.8s ease; */
}


.door-frame {
	width: 100%;
	height: 100%;
	/* border-radius: 22px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
	padding: clamp(6px, 1.4vmin, 14px);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1); */
}

.door-panel {
	position: relative;
	width: 100%;
	height: 100%;
	/* border-radius: 18px; */
	transform-origin: left center;
	transform-style: preserve-3d;
	transition: transform 0.9s ease;
}

.door-stage--opening .door-panel {
	transform: rotateY(-120deg);
}

.door-face {
	position: absolute;
	inset: 0;
	/* border-radius: 18px; */
	/* border: 3px solid rgba(255, 255, 255, 0.12); */
	display: flex;
	align-items: center;
	justify-content: center;
	backface-visibility: hidden;
}

.door-face--front {
	/* background: linear-gradient(160deg, #b4813a, #f5cc7a 65%, #af7327); */
	background-image: url(tuer_fg.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
	/* box-shadow: inset 0 15px 30px rgba(255, 255, 255, 0.25), inset 0 -15px 40px rgba(0, 0, 0, 0.35); */
	position: relative;
}

.door-face--inner {
	background: linear-gradient(160deg, #1d1d1d, #040404 70%, #1a1a1a);
	background-image: url(tuer_fg.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transform: rotateY(180deg);
}

.door-number {
	font-size: clamp(3rem, 10vmin, 5.5rem);
	font-weight: 700;
	color: #fdf0cc;
	text-shadow: 0 6px 18px rgba(43, 27, 2, 0.65);
}

.door-lock {
	position: absolute;
	bottom: clamp(24px, 4vmin, 40px);
	left: 50%;
	transform: translateX(-50%);
	width: clamp(46px, 8vmin, 82px);
	height: clamp(58px, 10vmin, 110px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.door-lock__shackle {
	width: 70%;
	height: 45%;
	border: 6px solid rgba(28, 34, 42, 0.9);
	border-bottom: none;
	border-radius: 18px 18px 0 0;
	background: rgba(255, 255, 255, 0.1);
}

.door-lock__body {
	width: 78%;
	height: 35%;
	background: linear-gradient(140deg, #2b3542, #161c24);
	border-radius: 10px;
	box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.2), inset 0 -4px 10px rgba(0, 0, 0, 0.4);
}

.door-message {
	font-size: clamp(1rem, 2.8vmin, 1.35rem);
	font-weight: 600;
	text-align: center;
	width: 100%;
	opacity: 0.9;
	position: absolute;
	top: 62vh;
}

@media (orientation: landscape) {
	.door-stage {
		background-size: 100vw;
	}
	.door-backdrop {
		transform: translate(-50%, -53%);
		width: 25vw;
		height: 23vw;
		transform-origin: center;
		/* transition: transform 1.1s ease, opacity 0.8s ease; */
	}
	.door-message {
		top: 71vh;
	}
}

.door-stage--zoom .door-backdrop {
	transform: scale(3.2) translateY(8%);
	opacity: 0;
}

.door-stage--zoom .door-message {
	opacity: 0;
}

.door-stage--zoom {
	pointer-events: none;
	transform: scale(8.5);
}