html,
body {
	height: 100%
}

body {
	margin: 0;
	background: #0a0806;
	font-family: sans-serif;
	display: flex;
	flex-direction: column
}

.container {
	width: 100%;
	flex: 1;
	display: flex;
	flex-direction: column
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

.gr {
	width: 100%;
	flex: 1;
	background: #100e0c;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center
}

.stage {
	perspective: 1300px;
	perspective-origin: 50% 42%;
	width: 100%;
	height: 468px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
	margin-top: 20px;
	flex-shrink: 0
}

.track {
	position: relative;
	width: 0;
	height: 0;
	transform-style: preserve-3d
}

.card {
	position: absolute;
	top: -135px;
	left: -156px;
	transform-origin: center center;
	transition: transform .65s cubic-bezier(.25, .46, .45, .94), opacity .65s ease;
	cursor: pointer
}

.frame {
	width: 312px;
	padding: 17px;
	background:
		linear-gradient(135deg, rgba(255, 190, 80, .07) 0%, transparent 32%, rgba(0, 0, 0, .14) 100%),
		repeating-linear-gradient(88deg, transparent 0, rgba(0, 0, 0, .055) 1px, transparent 2px, transparent 7px),
		repeating-linear-gradient(92deg, transparent 0, rgba(200, 140, 60, .04) 1px, transparent 2px, transparent 11px),
		linear-gradient(148deg, #7a5438 0%, #3e2210 22%, #5c3418 48%, #2a1608 72%, #4e3020 100%);
	position: relative;
}

.frame::before {
	content: '';
	position: absolute;
	inset: 9px;
	border: 1.5px solid #b8903a;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .35), inset 1px 1px 0 rgba(255, 210, 100, .12);
	background-image:
		linear-gradient(to right, rgba(185, 145, 55, .8) 14px, transparent 14px),
		linear-gradient(to bottom, rgba(185, 145, 55, .8) 14px, transparent 14px),
		linear-gradient(to left, rgba(185, 145, 55, .8) 14px, transparent 14px),
		linear-gradient(to bottom, rgba(185, 145, 55, .8) 14px, transparent 14px),
		linear-gradient(to right, rgba(185, 145, 55, .8) 14px, transparent 14px),
		linear-gradient(to top, rgba(185, 145, 55, .8) 14px, transparent 14px),
		linear-gradient(to left, rgba(185, 145, 55, .8) 14px, transparent 14px),
		linear-gradient(to top, rgba(185, 145, 55, .8) 14px, transparent 14px);
	background-size:
		14px 1px, 1px 14px,
		14px 1px, 1px 14px,
		14px 1px, 1px 14px,
		14px 1px, 1px 14px;
	background-position:
		3px 3px, 3px 3px,
		calc(100% - 3px) 3px, calc(100% - 3px) 3px,
		3px calc(100% - 3px), 3px calc(100% - 3px),
		calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px);
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 5
}

.frame::after {
	content: '';
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(140, 100, 30, .4);
	pointer-events: none;
	z-index: 5
}

.frame-shadow {
	box-shadow:
		inset 4px 4px 8px rgba(255, 180, 80, .13),
		inset -4px -4px 8px rgba(0, 0, 0, .68),
		inset 1px 1px 0 rgba(255, 215, 120, .18),
		inset -1px -1px 0 rgba(0, 0, 0, .45),
		2px 2px 0 rgba(255, 180, 80, .05),
		-1px -1px 0 rgba(0, 0, 0, .65),
		0 0 80px rgba(0, 0, 0, .9),
		0 8px 24px rgba(0, 0, 0, .75)
}

.mat {
	padding: 12px;
	background: #ece6d8;
	position: relative;
	box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .22), inset -1px -1px 6px rgba(0, 0, 0, .12)
}

.mat::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, .07) 0%, transparent 55%, rgba(0, 0, 0, .04) 100%);
	pointer-events: none;
	z-index: 2
}

.art {
	width: 100%;
	height: 170px;
	display: block;
	position: relative;
	overflow: hidden
}

.art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.art::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(135deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .04) 25%, transparent 55%, rgba(0, 0, 0, .06) 100%),
		repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, .025) 3px, rgba(0, 0, 0, .025) 4px),
		repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, .025) 3px, rgba(0, 0, 0, .025) 4px);
	pointer-events: none;
	z-index: 1
}

.plaque {
	margin: 12px auto 0;
	width: 211px;
	padding: 9px 18px 10px;
	background: linear-gradient(135deg, #c2a048 0%, #8a6410 40%, #c2a048 70%, #a07820 100%);
	text-align: center;
	box-shadow:
		0 4px 14px rgba(0, 0, 0, .75),
		inset 0 2px 5px rgba(255, 220, 100, .18),
		inset 0 -2px 5px rgba(0, 0, 0, .45),
		inset 0 1px 0 rgba(255, 230, 120, .35),
		inset 0 -1px 0 rgba(0, 0, 0, .4)
}

.pt {
	font-size: 14px;
	font-weight: 500;
	color: #1a1005;
	letter-spacing: .07em;
	font-family: Georgia, serif;
	text-shadow: 0 1px 0 rgba(255, 220, 100, .35), 0 -1px 0 rgba(0, 0, 0, .35)
}

.ps {
	font-size: 11px;
	color: #3a2508;
	margin-top: 2px;
	letter-spacing: .05em
}

.gf {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
	margin-bottom: 20px
}

.nb {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(170, 130, 55, .35);
	background: rgba(170, 130, 55, .07);
	color: rgba(195, 160, 75, .85);
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .2s
}

.nb:hover {
	background: rgba(170, 130, 55, .2);
	color: #c9a84c
}

.nb:active {
	transform: scale(.9)
}

.dots {
	display: flex;
	gap: 5px;
	align-items: center
}

.dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(170, 130, 55, .28);
	transition: all .3s;
	cursor: pointer
}

.dot.active {
	background: #c9a84c;
	width: 14px;
	border-radius: 2px
}

.winfo {
	position: absolute;
	z-index: 3;
	bottom: 88px;
	right: 24px;
	text-align: right;
	transition: opacity .35s .15s
}

.wnum {
	font-size: 8px;
	letter-spacing: .18em;
	color: rgba(170, 130, 55, .4);
	margin-bottom: 3px;
	font-family: monospace
}

.wtitle {
	font-size: 10px;
	color: rgba(210, 180, 110, .55);
	letter-spacing: .06em;
	font-family: Georgia, serif;
	font-style: italic
}

/* 上傳 Modal */
.umodal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(0, 0, 0, .78);
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(5px)
}

.umodal.open {
	display: flex
}

.ubox {
	background: linear-gradient(160deg, #1c1610 0%, #110d0a 100%);
	border: 1px solid rgba(180, 130, 50, .22);
	padding: 28px 24px 22px;
	width: min(360px, 88vw);
	box-shadow: 0 24px 70px rgba(0, 0, 0, .85)
}

.utop {
	font-size: 12px;
	letter-spacing: .16em;
	color: rgba(200, 160, 60, .75);
	font-family: Georgia, serif;
	margin-bottom: 18px;
	text-align: center
}

.uimg-wrap {
	position: relative;
	cursor: pointer;
	margin-bottom: 12px
}

.uimg-wrap input[type=file] {
	display: none
}

.upreview {
	width: 100%;
	aspect-ratio: 3/2;
	background: rgba(255, 255, 255, .03);
	border: 1px dashed rgba(180, 130, 50, .28);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: border-color .2s
}

.upreview:hover {
	border-color: rgba(180, 130, 50, .55)
}

.upreview span {
	font-size: 11px;
	color: rgba(180, 130, 50, .4);
	letter-spacing: .08em
}

.upreview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.uinput {
	display: block;
	width: 100%;
	background: rgba(255, 255, 255, .04);
	border: none;
	border-bottom: 1px solid rgba(180, 130, 50, .2);
	color: rgba(220, 190, 120, .9);
	padding: 8px 4px;
	font-size: 12px;
	margin-bottom: 11px;
	outline: none;
	font-family: Georgia, serif;
	letter-spacing: .05em
}

.uinput::placeholder {
	color: rgba(180, 130, 50, .3)
}

.uinput:focus {
	border-bottom-color: rgba(180, 130, 50, .55)
}

.ubtns {
	display: flex;
	gap: 10px;
	margin-top: 8px
}

.ubtn {
	flex: 1;
	padding: 9px 0;
	font-size: 11px;
	letter-spacing: .1em;
	cursor: pointer;
	border: 1px solid rgba(180, 130, 50, .28);
	font-family: Georgia, serif;
	transition: all .2s
}

.ubtn.cancel {
	background: transparent;
	color: rgba(180, 130, 50, .55)
}

.ubtn.cancel:hover {
	background: rgba(180, 130, 50, .08);
	color: rgba(200, 160, 70, .8)
}

.ubtn.ok {
	background: linear-gradient(135deg, #c2a048 0%, #8a6410 50%, #a07820 100%);
	color: #1a1005;
	font-weight: 600;
	border-color: transparent
}

.ubtn.ok:hover {
	filter: brightness(1.1)
}

.ubtn.ok:disabled {
	opacity: .35;
	cursor: not-allowed;
	filter: none
}

/* 燈光動畫 */
#beam {
	transform-origin: 50% 0%;
	animation: beam-sway 11s ease-in-out infinite
}

#lamp-main {
	animation: lamp-flicker 5s ease-in-out infinite
}

#lamp-halo {
	animation: lamp-flicker 5s ease-in-out infinite .7s
}

#wall-glow {
	animation: glow-breathe 7s ease-in-out infinite
}

#floor-glow {
	transform-origin: 50% 50%;
	animation: floor-shimmer 7s ease-in-out infinite 2s
}

@keyframes beam-sway {

	0%,
	100% {
		transform: rotate(-2deg);
		opacity: .58
	}

	50% {
		transform: rotate(2deg);
		opacity: .85
	}
}

@keyframes lamp-flicker {

	0%,
	100% {
		opacity: 1
	}

	20% {
		opacity: .55
	}

	40% {
		opacity: .88
	}

	65% {
		opacity: .62
	}

	80% {
		opacity: .9
	}
}

@keyframes glow-breathe {

	0%,
	100% {
		opacity: .65
	}

	50% {
		opacity: 1
	}
}

@keyframes floor-shimmer {

	0%,
	100% {
		transform: scale(1);
		opacity: .85
	}

	50% {
		transform: scale(1.18);
		opacity: .45
	}
}

@media(max-width:520px) {
	.gr {
		min-height: 480px
	}

	.stage {
		height: 494px;
		perspective: 1200px
	}

	.card {
		top: -151px;
		left: -176px
	}

	.frame {
		width: 351px;
		padding: 13px
	}

	.frame::before {
		inset: 8px
	}

	.frame::after {
		inset: 12px
	}

	.mat {
		padding: 10px
	}

	.art {
		height: 203px
	}

	.plaque {
		width: 239px;
		padding: 9px 18px 10px
	}

	.pt {
		font-size: 14px
	}

	.ps {
		font-size: 11px
	}

	.winfo {
		bottom: 72px;
		right: 14px
	}

	.nb {
		width: 26px;
		height: 26px;
		font-size: 11px
	}
}

#badd,
#umodal {
	display: none !important;
}

/* ── Loading Screen ── */
#ls {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: #080604;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: opacity .5s ease;
}

#ls.ls-fade {
	opacity: 0;
	pointer-events: none;
}

.ls-beam {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
			transparent 0%,
			rgba(255, 205, 110, .03) 12%,
			rgba(255, 215, 130, .2) 38%,
			rgba(255, 235, 170, .48) 50%,
			rgba(255, 215, 130, .2) 62%,
			rgba(255, 205, 110, .03) 88%,
			transparent 100%);
	transform: translateX(-100%);
	opacity: 0;
	pointer-events: none;
}

#ls.ls-sweep .ls-beam {
	animation: ls-beam-sweep 1.55s cubic-bezier(.4, 0, .55, 1) forwards;
}

@keyframes ls-beam-sweep {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}

	7% {
		opacity: 1;
	}

	93% {
		opacity: 1;
	}

	100% {
		transform: translateX(100%);
		opacity: 0;
	}
}

.ls-glow {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 420px;
	height: 300px;
	background: radial-gradient(ellipse at 50% 0%, rgba(200, 155, 60, .13) 0%, transparent 68%);
	pointer-events: none;
	animation: ls-breathe 3.5s ease-in-out infinite;
}

@keyframes ls-breathe {

	0%,
	100% {
		opacity: .6;
	}

	50% {
		opacity: 1;
	}
}

.ls-lamp-dot {
	width: 7px;
	height: 4px;
	background: rgba(240, 210, 130, .72);
	border-radius: 50%;
	margin: 0 auto 5px;
	box-shadow: 0 0 10px rgba(240, 210, 130, .45), 0 0 24px rgba(200, 160, 70, .2);
	animation: ls-flicker 4.5s ease-in-out infinite;
}

@keyframes ls-flicker {

	0%,
	100% {
		opacity: 1;
	}

	20% {
		opacity: .42;
	}

	40% {
		opacity: .88;
	}

	65% {
		opacity: .52;
	}

	82% {
		opacity: .95;
	}
}

.ls-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ls-title {
	font-family: 'Cinzel', Georgia, serif;
	font-size: clamp(15px, 3.5vw, 24px);
	font-weight: 400;
	letter-spacing: .35em;
	color: rgba(210, 175, 95, .88);
	margin: 18px 0 12px;
	text-shadow: 0 0 35px rgba(200, 155, 60, .28);
	animation: ls-rise .9s ease .15s both;
}

.ls-rule {
	width: 50px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(185, 140, 50, .5), transparent);
	margin-bottom: 10px;
	animation: ls-rise .9s ease .3s both;
}

.ls-sub {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: 12px;
	letter-spacing: .15em;
	color: rgba(148, 108, 45, .58);
	margin-bottom: 34px;
	animation: ls-rise .9s ease .42s both;
}

.ls-progress {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	animation: ls-rise .9s ease .55s both;
}

.ls-bar-track {
	width: 160px;
	height: 1px;
	background: rgba(118, 85, 28, .22);
	position: relative;
}

.ls-bar-fill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0%;
	background: linear-gradient(90deg, #7a5c18, #c9a84c);
	transition: width .35s ease;
	box-shadow: 0 0 6px rgba(200, 160, 60, .45);
}

#ls-count {
	font-family: 'Cinzel', Georgia, serif;
	font-size: 9px;
	letter-spacing: .2em;
	color: rgba(145, 105, 42, .5);
}

@keyframes ls-rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}