/* Lớp phủ màn tải của bản web. Bố cục và màu bám theo scripts/boot/man_tai.gd:
   mọi số đo là đơn vị logic của khung gốc 1280x720, nhân với --k giống stretch canvas_items, aspect expand của Godot. */

@font-face {
	font-family: "NGH Co";
	src: url("anh/chu_co.woff2") format("woff2");
	font-display: block;
}

/* Nét móc của ư, ơ trong font cọ chìa sang phải, nới khoảng trắng như spacing_space = 5 bên Godot */
.ngh-nut-co, .ngh-hop-tieu-de, .ngh-phan-tram, #ngh-xoay {
	word-spacing: calc(var(--k) * 5);
}

@font-face {
	font-family: "NGH Thuong";
	src: url("anh/chu_thuong.woff2") format("woff2");
	font-display: block;
}

:root {
	--giay: rgb(240, 224, 189);
	--muc: rgb(18, 15, 15);
	--son: rgb(194, 31, 20);
	--huyet: rgb(140, 13, 10);
	--vang: rgb(242, 196, 87);
	--nen: rgb(8, 13, 15);
	--k: min(calc(100vw / 1280), calc(100vh / 720));
	--tw: min(60vw, calc(var(--k) * 760));
}

@supports (height: 100dvh) {
	:root {
		--k: min(calc(100vw / 1280), calc(100dvh / 720));
	}
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
	overscroll-behavior: none;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

#canvas {
	position: fixed;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: #000;
	outline: none;
}

/* ---------------------------------------------------------------- Lớp phủ */

#ngh-phu {
	position: fixed;
	inset: 0;
	z-index: 10;
	overflow: hidden;
	background: var(--nen);
	color: var(--giay);
	font-family: "NGH Thuong", Georgia, serif;
	text-align: center;
	transition: opacity 0.6s ease-in;
}

#ngh-phu.dang-an {
	opacity: 0;
	pointer-events: none;
}

#ngh-phu p {
	margin: 0;
}

.ngh-nen {
	position: absolute;
	inset: 0;
	background: var(--nen) url("anh/nen.webp") center / cover no-repeat;
}

.ngh-toi-day {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* Viền mực quanh chữ, giống outline_size của Label trong Godot */
.ngh-vien {
	--o: calc(var(--k) * 2);
	--vc: rgba(18, 15, 15, 0.85);
	text-shadow:
		var(--o) 0 0 var(--vc), calc(var(--o) * -1) 0 0 var(--vc),
		0 var(--o) 0 var(--vc), 0 calc(var(--o) * -1) 0 var(--vc),
		calc(var(--o) * 0.7) calc(var(--o) * 0.7) 0 var(--vc), calc(var(--o) * -0.7) calc(var(--o) * 0.7) 0 var(--vc),
		calc(var(--o) * 0.7) calc(var(--o) * -0.7) 0 var(--vc), calc(var(--o) * -0.7) calc(var(--o) * -0.7) 0 var(--vc);
}

.ngh-vien-day {
	--o: calc(var(--k) * 3);
	--vc: rgba(18, 15, 15, 0.9);
	text-shadow:
		var(--o) 0 0 var(--vc), calc(var(--o) * -1) 0 0 var(--vc),
		0 var(--o) 0 var(--vc), 0 calc(var(--o) * -1) 0 var(--vc),
		calc(var(--o) * 0.7) calc(var(--o) * 0.7) 0 var(--vc), calc(var(--o) * -0.7) calc(var(--o) * 0.7) 0 var(--vc),
		calc(var(--o) * 0.7) calc(var(--o) * -0.7) 0 var(--vc), calc(var(--o) * -0.7) calc(var(--o) * -0.7) 0 var(--vc);
}

/* Ảnh trắng dùng làm khuôn, tô màu bằng nền, như modulate trong Godot */
.ngh-bat-quai, .ngh-vet-son, .ngh-chu-ten, .ngh-thanh-bong, .ngh-thanh-ranh, .ngh-thanh-day, .ngh-nut-co::before {
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* ---------------------------------------------------------------- Tên game */

.ngh-ten {
	position: absolute;
	left: 50%;
	top: 30%;
	width: var(--tw);
	aspect-ratio: 900 / 297;
	transform: translate(-50%, -50%);
}

.ngh-bat-quai {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60%;
	aspect-ratio: 1;
	margin-left: -30%;
	transform: translateY(-50%);
	background: rgba(242, 196, 87, 0.07);
	-webkit-mask-image: url("anh/bat_quai.webp");
	mask-image: url("anh/bat_quai.webp");
	animation: ngh-xoay-vong 105s linear infinite;
}

.ngh-vet-son {
	position: absolute;
	left: -5%;
	top: 17%;
	width: 110%;
	height: 78.8%;
	background: rgba(194, 31, 20, 0.9);
	-webkit-mask-image: url("anh/vet_co.webp");
	mask-image: url("anh/vet_co.webp");
	clip-path: inset(0 100% 0 0);
	animation: ngh-quet 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.ngh-chu-ten {
	position: absolute;
	inset: 0;
	-webkit-mask-image: url("anh/chu_ten.webp");
	mask-image: url("anh/chu_ten.webp");
	opacity: 0;
	animation: ngh-hien 0.5s linear 0.3s forwards, ngh-nhun 7.85s ease-in-out 0.3s infinite;
}

.ngh-chu-ten-bong {
	background: rgba(18, 15, 15, 0.8);
	left: calc(var(--k) * 5);
	top: calc(var(--k) * 7);
	right: calc(var(--k) * -5);
	bottom: calc(var(--k) * -7);
}

.ngh-chu-ten-vang {
	background: var(--vang);
}

.ngh-loi-dan {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(30% + var(--tw) * 0.165 + var(--k) * 18);
	transform: translateY(-50%);
	font-size: calc(var(--k) * 19);
	color: rgba(240, 224, 189, 0.85);
	--o: calc(var(--k) * 2.5);
	white-space: nowrap;
	opacity: 0;
	animation: ngh-hien 0.6s linear 0.8s forwards;
}

/* ---------------------------------------------------------------- Nút nét cọ */

.ngh-nut-co {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 0;
	margin: 0;
	padding: 0 calc(var(--k) * 30);
	background: none;
	color: var(--giay);
	font-family: "NGH Co", "NGH Thuong", serif;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	--o: calc(var(--k) * 3);
	--vc: rgba(18, 15, 15, 0.9);
	text-shadow:
		var(--o) 0 0 var(--vc), calc(var(--o) * -1) 0 0 var(--vc),
		0 var(--o) 0 var(--vc), 0 calc(var(--o) * -1) 0 var(--vc),
		calc(var(--o) * 0.7) calc(var(--o) * 0.7) 0 var(--vc), calc(var(--o) * -0.7) calc(var(--o) * 0.7) 0 var(--vc),
		calc(var(--o) * 0.7) calc(var(--o) * -0.7) 0 var(--vc), calc(var(--o) * -0.7) calc(var(--o) * -0.7) 0 var(--vc);
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.ngh-nut-co::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--nut-mau, rgba(18, 15, 15, 0.9));
	-webkit-mask-image: url("anh/vet_co.webp");
	mask-image: url("anh/vet_co.webp");
	transition: background-color 0.12s;
}

.ngh-nut-co:hover::before, .ngh-nut-co:focus-visible::before {
	background: var(--son);
}

.ngh-nut-co:active::before {
	background: var(--huyet);
}

.ngh-nut-co:disabled {
	cursor: default;
}

.ngh-nut-co:disabled::before {
	background: rgba(18, 15, 15, 0.4);
}

.ngh-nut-co[hidden] {
	display: none;
}

/* Trên nền đêm, nút mực đen chìm mất, nên nút ở màn chờ dùng son đỏ và giấy mờ */
.ngh-khu-nut .ngh-nut-chinh {
	--nut-mau: rgba(194, 31, 20, 0.88);
}

.ngh-khu-nut .ngh-nut-chinh:hover::before, .ngh-khu-nut .ngh-nut-chinh:focus-visible::before {
	background: rgb(222, 52, 32);
}

.ngh-khu-nut .ngh-nut-chinh:disabled {
	color: rgba(240, 224, 189, 0.55);
}

.ngh-khu-nut .ngh-nut-chinh:disabled::before {
	background: rgba(240, 224, 189, 0.1);
}

.ngh-khu-nut .ngh-nut-phu {
	--nut-mau: rgba(240, 224, 189, 0.16);
}

.ngh-nut-chinh {
	min-width: calc(var(--k) * 340);
	height: calc(var(--k) * 64);
	font-size: calc(var(--k) * 32);
}

.ngh-nut-phu {
	--nut-mau: rgba(18, 15, 15, 0.62);
	min-width: calc(var(--k) * 300);
	height: calc(var(--k) * 46);
	font-size: calc(var(--k) * 21);
}

/* ---------------------------------------------------------------- Màn chờ bấm: nút vào và nút APK */

.ngh-khu-nut {
	position: absolute;
	left: 0;
	right: 0;
	top: 71.8%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--k) * 18);
	transform: translateY(calc(var(--k) * -32));
	transition: opacity 0.35s;
}

#ngh-phu:not(.dang-cho) .ngh-khu-nut {
	opacity: 0;
	pointer-events: none;
}

/* ---------------------------------------------------------------- Thanh tiến trình */

.ngh-khu-tai {
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: opacity 0.35s 0.15s;
}

#ngh-phu.dang-cho .ngh-khu-tai {
	opacity: 0;
	transition: none;
}

.ngh-phan-tram {
	position: absolute;
	left: 0;
	right: 0;
	top: 65.5%;
	transform: translateY(-50%);
	font-family: "NGH Co", serif;
	font-size: calc(var(--k) * 32);
	line-height: 1.2;
	color: var(--vang);
}

.ngh-thanh {
	position: absolute;
	left: 50%;
	top: 71.8%;
	width: min(70vw, calc(var(--k) * 560));
	height: calc(var(--k) * 34);
	transform: translate(-50%, -50%);
}

.ngh-thanh-bong {
	position: absolute;
	inset: calc(var(--k) * -3);
	background: rgba(18, 15, 15, 0.6);
	-webkit-mask-image: url("anh/vet_co.webp");
	mask-image: url("anh/vet_co.webp");
}

.ngh-thanh-ranh {
	position: absolute;
	inset: 0;
	background: rgba(240, 224, 189, 0.16);
	-webkit-mask-image: url("anh/vet_co.webp");
	mask-image: url("anh/vet_co.webp");
}

.ngh-thanh-day {
	position: absolute;
	inset: 0;
	background: var(--son);
	-webkit-mask-image: url("anh/vet_co.webp");
	mask-image: url("anh/vet_co.webp");
	clip-path: inset(0 100% 0 0);
}

.ngh-thanh-dau {
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	animation: ngh-nhip 1.26s ease-in-out infinite;
}

.ngh-thanh-dau i, .ngh-thanh-dau b {
	position: absolute;
	border-radius: 50%;
	background: var(--vang);
	transform: translate(-50%, -50%);
}

.ngh-thanh-dau i {
	width: calc(var(--k) * 26);
	height: calc(var(--k) * 26);
	opacity: 0.16;
}

.ngh-thanh-dau b {
	width: calc(var(--k) * 10);
	height: calc(var(--k) * 10);
	opacity: 0.9;
}

.ngh-thanh-dau.an {
	display: none;
}

.ngh-trang-thai {
	position: absolute;
	left: 0;
	right: 0;
	top: 78.5%;
	transform: translateY(-50%);
	font-size: calc(var(--k) * 20);
	color: rgba(240, 224, 189, 0.8);
	white-space: nowrap;
}

/* Lý do trình duyệt không chạy được, hiện ngay dưới nút khi chưa bấm */
#ngh-phu.dang-cho .ngh-trang-thai {
	top: 91%;
	line-height: 1.3;
	color: rgba(240, 224, 189, 0.9);
	white-space: normal;
	width: min(86vw, calc(var(--k) * 820));
	left: 50%;
	right: auto;
	transform: translate(-50%, -50%);
}

/* ---------------------------------------------------------------- Câu dẫn và phiên bản */

.ngh-cau-dan {
	position: absolute;
	left: 50%;
	top: 89.5%;
	width: min(86vw, calc(var(--k) * 900));
	transform: translate(-50%, -50%);
	font-size: calc(var(--k) * 22);
	line-height: 1.35;
	color: rgba(240, 224, 189, 0.7);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: calc(var(--k) * 3) 0;
	opacity: 0;
	transition: opacity 0.8s linear;
}

.ngh-cau-dan.hien {
	opacity: 1;
}

#ngh-phu.dang-cho .ngh-cau-dan {
	visibility: hidden;
}

#ngh-phu.co-ly-do .ngh-cau-dan {
	visibility: hidden;
}

.ngh-ban {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--k) * 8);
	font-size: calc(var(--k) * 13);
	color: rgba(240, 224, 189, 0.32);
}

/* ---------------------------------------------------------------- Hộp thông báo trên tờ giấy */

.ngh-hop {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 0.25s;
}

.ngh-hop.hien {
	opacity: 1;
}

.ngh-hop[hidden] {
	display: none;
}

.ngh-the {
	box-sizing: border-box;
	width: min(90vw, calc(var(--k) * 600));
	min-height: calc(var(--k) * 300);
	padding: calc(var(--k) * 40) calc(var(--k) * 56);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--k) * 14);
	background: url("anh/the_giay.webp") center / 100% 100% no-repeat;
}

.ngh-hop-tieu-de {
	font-family: "NGH Co", serif;
	font-size: calc(var(--k) * 40);
	line-height: 1.2;
	color: var(--son);
}

.ngh-hop-noi-dung {
	font-size: calc(var(--k) * 21);
	line-height: 1.45;
	color: var(--muc);
	overflow-wrap: anywhere;
}

.ngh-hop-nut {
	display: flex;
	justify-content: center;
	gap: calc(var(--k) * 18);
	margin-top: calc(var(--k) * 4);
}

.ngh-hop-nut .ngh-nut-co {
	min-width: calc(var(--k) * 240);
	height: calc(var(--k) * 58);
	font-size: calc(var(--k) * 28);
}

/* ---------------------------------------------------------------- Nhắc xoay ngang trên điện thoại cầm dọc */

#ngh-xoay {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	background: var(--nen) url("anh/nen.webp") 30% center / cover no-repeat;
	color: var(--giay);
	font-family: "NGH Co", serif;
	font-size: 26px;
	text-align: center;
	padding: 0 24px;
}

#ngh-xoay p {
	margin: 0;
	max-width: 320px;
	line-height: 1.3;
	text-shadow: 0 0 6px var(--muc), 0 0 2px var(--muc);
}

.ngh-dien-thoai {
	width: 54px;
	height: 92px;
	box-sizing: border-box;
	border: 4px solid var(--vang);
	border-radius: 9px;
	box-shadow: 0 0 0 2px rgba(18, 15, 15, 0.6);
	animation: ngh-xoay-may 2.4s ease-in-out infinite;
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
	#ngh-xoay {
		display: flex;
	}
}

.ngh-khong-js {
	position: fixed;
	inset: 0;
	z-index: 30;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nen);
	color: var(--giay);
	font: 20px Georgia, serif;
	text-align: center;
}

/* ---------------------------------------------------------------- Chuyển động */

@keyframes ngh-xoay-vong {
	to { transform: translateY(-50%) rotate(360deg); }
}

@keyframes ngh-quet {
	to { clip-path: inset(0 0 0 0); }
}

@keyframes ngh-hien {
	to { opacity: 1; }
}

@keyframes ngh-nhun {
	0%, 100% { translate: 0 0; }
	25% { translate: 0 calc(var(--k) * 3); }
	75% { translate: 0 calc(var(--k) * -3); }
}

@keyframes ngh-nhip {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

@keyframes ngh-xoay-may {
	0%, 20% { transform: rotate(0deg); }
	55%, 80% { transform: rotate(-90deg); }
	100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ngh-bat-quai, .ngh-chu-ten, .ngh-thanh-dau, .ngh-dien-thoai {
		animation-duration: 0.01s;
		animation-iteration-count: 1;
	}
}