@font-face {
	font-family:CampSans;
	src:local("Malgun Gothic");
	font-display:swap
}
:root {
	color-scheme:dark;
	--navy:#080f1c;
	--cream:#fff3d6;
	--gold:#f5c576;
	--orange:#ed873d;
	--muted:#aec1d2
}
* {
	box-sizing:border-box;
	-webkit-tap-highlight-color:transparent
}
html,body {
	margin:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background:#03070d;
	overscroll-behavior:none;
	touch-action:none
}
body {
	font-family:CampSans,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
	color:var(--cream);
	user-select:none;
	-webkit-user-select:none
}
button {
	font:inherit;
	cursor:pointer;
	touch-action:manipulation
}
button:disabled {
	cursor:wait;
	opacity:.55
}
button:focus-visible {
	outline:4px solid #fff;
	outline-offset:6px
}
[hidden] {
	display:none!important
}
.stage {
	position:absolute;
	width:1080px;
	height:1920px;
	left:50%;
	top:50%;
	transform-origin:center;
	background:var(--navy);
	overflow:hidden
}
.hud {
	position:absolute;
	left:36px;
	right:36px;
	top:30px;
	height:133px;
	display:grid;
	grid-template-columns:268px 245px 1fr;
	gap:24px;
	align-items:center;
	z-index:5
}
.eyebrow {
	font-size:21px;
	color:#a7bbcd;
	font-weight:600;
	letter-spacing:.04em
}
.timer-value {
	display:flex;
	align-items:center;
	gap:12px;
	height:80px
}
.timer-value svg {
	width:36px;
	fill:none;
	stroke:var(--gold);
	stroke-width:2.1
}
.timer-value b {
	font-family:Arial,sans-serif;
	font-size:66px;
	letter-spacing:-2px;
	font-variant-numeric:tabular-nums
}
.timer-value>span {
	font-size:24px;
	color:#b7c3d1;
	padding-top:14px
}
.timer-box.urgent .timer-value {
	color:#ff796b;
	animation:timer-pulse .6s ease-in-out infinite alternate
}
.hearts {
	height:80px;
	display:flex;
	gap:9px;
	align-items:center;
	color:#ff7972;
	font-size:53px;
	line-height:1
}
.hearts span {
	transition:opacity .2s,transform .25s
}
.hearts span.lost {
	color:#38404f;
	opacity:.55;
	transform:scale(.8)
}
.collection-title {
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:10px
}
.collection-title b {
	color:var(--gold);
	font-size:22px;
	font-weight:700
}
.collection {
	display:flex;
	justify-content:flex-end;
	align-items:center;
	gap:6px;
	min-height:66px
}
.collection-slot {
	width:49px;
	height:65px;
	border:1px dashed #4c5968;
	border-radius:12px;
	background:#111e2c;
	display:grid;
	place-items:center;
	color:#677585;
	font-size:23px;
	position:relative
}
.collection-slot img {
	width:46px;
	height:62px;
	object-fit:contain;
	display:none
}
.collection-slot.collected {
	background:#2c2b25;
	border-color:#a98750;
	border-style:solid;
	animation:slot-pop .4s ease
}
.collection-slot.collected img {
	display:block
}
.collection-slot.collected span {
	display:none
}
.time-track {
	position:absolute;
	left:28px;
	right:28px;
	top:176px;
	height:4px;
	background:#223043;
	z-index:6;
	overflow:hidden
}
.time-track i {
	display:block;
	width:100%;
	height:100%;
	background:var(--gold);
	transform-origin:left;
	transition:background .3s
}
.scene {
	position:absolute;
	left:2.5925925926%;
	top:10%;
	width:94.8148148148%;
	height:80%;
	overflow:hidden;
	background:#101b2b
}
#board {
	display:block;
	width:100%;
	height:100%;
	touch-action:none
}
.fire-glow {
	position:absolute;
	left:414px;
	top:1120px;
	width:220px;
	height:190px;
	pointer-events:none;
	background:radial-gradient(ellipse,rgba(255,170,30,.15),transparent 70%);
	mix-blend-mode:screen;
	animation:fire 2.7s ease-in-out infinite alternate
}
.mistake-flash {
	position:absolute;
	inset:0;
	pointer-events:none;
	border:0 solid #ff6e65;
	opacity:0
}
.mistake-flash.flash {
	animation:wrong-flash .45s ease
}
#particles {
	position:absolute;
	inset:0;
	z-index:28;
	pointer-events:none
}
.game-footer {
	position:absolute;
	left:28px;
	right:28px;
	top:1762px;
	text-align:center;
	z-index:5
}
#footer-hint {
	display:block;
	color:#a5b5c6;
	font-size:23px;
	margin-bottom:23px
}
.quit-button {
	background:transparent;
	border:1px solid #435165;
	border-radius:50px;
	color:#e0e6ed;
	font-size:29px;
	padding:17px 60px;
	min-height:78px;
	min-width:260px
}
.quit-button>span {
	font-size:33px;
	vertical-align:-1px;
	margin-right:8px;
	color:#9cabbc
}
.quit-button:active {
	background:#273648;
	transform:scale(.98)
}
.screen {
	position:absolute;
	inset:0;
	z-index:15;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(3,12,25,.76);
	backdrop-filter:blur(7px)
}
.intro-card {
	width:850px;
	padding:44px 56px 31px;
	border:1px solid #788579;
	border-radius:30px;
	text-align:center;
	background:linear-gradient(150deg,#1e3543,#0e202e 65%);
	box-shadow:0 30px 100px #0008;
	animation:card-enter .7s ease both;
	position:relative
}
.intro-card:before,.result-card:before {
	content:"";
	position:absolute;
	inset:11px;
	border:1px solid #f5c57620;
	border-radius:22px;
	pointer-events:none
}
.card-overline {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:15px;
	color:var(--gold);
	font:600 19px/1.5 Arial,sans-serif;
	letter-spacing:4px
}
.card-overline>span {
	height:1px;
	width:50px;
	background:var(--gold);
	opacity:.5
}
.small-title {
	color:#bac9cf;
	font-size:23px;
	margin:24px 0 13px
}
h1 {
	font-size:64px;
	line-height:1.32;
	letter-spacing:-3px;
	margin:0;
	font-weight:900
}
h1 em {
	color:var(--gold);
	font-style:normal
}
.lead {
	font-size:26px;
	color:#d6e0e3;
	line-height:1.6;
	margin:20px 0 20px
}
.lead strong {
	color:var(--gold)
}
.target-guide {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:28px
}
.target-guide figure {
	margin:0;
	background:radial-gradient(ellipse at 50% 55%,#c5b58429,transparent 70%);
	padding:4px 0 18px
}
.target-guide img {
	height:283px;
	width:225px;
	object-fit:contain;
	filter:drop-shadow(0 12px 12px #0004);
	animation:guide-float 4s ease-in-out infinite
}
.target-guide figure:nth-child(2) img {
	animation-delay:-2s
}
.target-guide figcaption {
	font-size:22px;
	font-weight:700;
	white-space:nowrap;
	margin-top:12px
}
.blue-dot,.orange-dot {
	display:inline-block;
	width:12px;
	height:12px;
	border-radius:50%;
	background:#659afa;
	margin-right:6px
}
.orange-dot {
	background:#ff9b47
}
.rules {
	border-top:1px solid #72828b44;
	border-bottom:1px solid #72828b44;
	padding:17px 0;
	text-align:center
}
.rules p {
	font-size:22px;
	color:#d8e3e7;
	line-height:1.7;
	margin:0
}
.rules p:last-child {
	color:#a9bbc5;
	font-size:19px
}
.red-heart {
	color:#ff7d79
}
.decoy-guide {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:24px;
	padding:15px 0 21px
}
.decoy-images {
	display:flex;
	gap:3px
}
.decoy-images img {
	height:85px;
	width:63px;
	object-fit:contain
}
.decoy-guide p {
	text-align:left;
	font-size:18px;
	line-height:1.7;
	color:#b9c9d0;
	margin:0
}
.decoy-guide b {
	font-size:21px;
	color:#e9d3c8
}
.primary-button {
	position:relative;
	border:1px solid #ffdd99;
	border-radius:14px;
	color:#382615;
	background:linear-gradient(#ffd98f,#efb95f);
	font-size:31px;
	font-weight:800;
	min-height:88px;
	padding:20px 26px;
	width:100%;
	box-shadow:0 6px 0 #9c672f;
	transition:filter .15s,transform .15s;
	letter-spacing:-.5px
}
.primary-button:active {
	transform:translateY(4px);
	box-shadow:0 2px 0 #9c672f
}
.primary-button>span {
	position:absolute;
	right:28px;
	font-size:37px;
	top:14px
}
.intro-foot {
	font-size:18px;
	color:#99aebc;
	margin:22px 0 0
}
.inline-error {
	font-size:20px;
	color:#ffb0a8;
	line-height:1.6;
	margin:14px 0 0
}
.inline-error:empty {
	display:none
}
.countdown-screen {
	background:rgba(6,16,31,.85);
	z-index:25;
	flex-direction:column
}
.countdown-screen p {
	font-size:38px;
	font-weight:700;
	color:var(--cream);
	margin:0
}
.countdown-screen b {
	font:900 310px/1.45 Arial,sans-serif;
	color:var(--gold);
	text-shadow:0 0 90px #f4bb5038
}
.countdown-screen b.pop {
	animation:count-pop .7s cubic-bezier(.17,.89,.3,1.2)
}
.countdown-screen>span {
	font-size:24px;
	color:#b3c4d6
}
.toast {
	position:absolute;
	top:1660px;
	left:50%;
	transform:translate(-50%,30px);
	background:#0a182de8;
	border:1px solid #a8bcca66;
	border-radius:50px;
	padding:20px 35px;
	z-index:14;
	font-size:25px;
	color:#fff;
	opacity:0;
	transition:opacity .16s,transform .16s;
	white-space:nowrap;
	pointer-events:none
}
.toast.show {
	opacity:1;
	transform:translate(-50%,0)
}
.toast.bad {
	background:#582c2cf2;
	border-color:#eb8a78
}
.flyer {
	position:absolute;
	object-fit:contain;
	z-index:29;
	pointer-events:none;
	filter:drop-shadow(0 0 12px #ffd17dbb);
	will-change:transform;
	transform-origin:center
}
.result-screen {
	z-index:24;
	background:radial-gradient(ellipse at 50% 40%,#17344aeb,#061121eb)
}
.result-card {
	position:relative;
	text-align:center;
	width:862px;
	padding:65px 62px 40px;
	background:linear-gradient(145deg,#253b48,#10212e);
	border:1px solid #c2a773;
	border-radius:30px;
	animation:card-enter .6s ease both
}
.medal {
	width:130px;
	height:130px;
	border-radius:50%;
	background:linear-gradient(145deg,#ffeeb3,#e6a346);
	color:#634021;
	display:grid;
	place-items:center;
	font-size:73px;
	margin:-130px auto 35px;
	border:8px solid #b88a4b;
	box-shadow:0 0 0 10px #f7d78e18,0 0 100px #edb95a35
}
.result-card h2 {
	font-size:66px;
	letter-spacing:-3px;
	margin:20px 0;
	color:var(--gold);
	line-height:1.35
}
.result-description {
	font-size:26px;
	line-height:1.7;
	color:#d5e1e7;
	margin:0
}
.result-friends {
	display:flex;
	height:350px;
	align-items:center;
	justify-content:center;
	gap:20px;
	margin:25px 0
}
.result-friends img {
	height:320px;
	width:240px;
	object-fit:contain;
	animation:friend-celebrate 2s ease-in-out infinite alternate;
	transform-origin:center bottom
}
.result-friends img:last-child {
	animation-delay:-1s
}
.result-friends>span {
	font-size:48px;
	color:#ff9891;
	animation:timer-pulse .8s infinite alternate
}
.result-stats {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	padding:25px 0;
	margin-bottom:36px;
	border-top:1px solid #99aaac44;
	border-bottom:1px solid #99aaac44
}
.result-stats>div+div {
	border-left:1px solid #99aaac44
}
.result-stats span {
	display:block;
	font-size:21px;
	color:#aabec8;
	margin-bottom:10px
}
.result-stats b {
	font-size:35px;
	letter-spacing:-1px;
	color:var(--cream)
}
.return-caption {
	font-size:19px;
	color:#aebfca;
	margin:27px 0 16px
}
.return-caption b {
	color:var(--gold)
}
.return-track {
	height:3px;
	background:#354552;
	overflow:hidden
}
.return-track i {
	display:block;
	width:100%;
	height:100%;
	background:var(--gold);
	transform-origin:left
}
.result-screen.unsuccessful .medal {
	background:#afc4d0;
	border-color:#637c8d;
	color:#304654;
	box-shadow:none
}
.result-screen.unsuccessful .result-friends img {
	animation:none
}
.dialog-screen {
	z-index:27
}
.dialog-card {
	background:#102638;
	border:1px solid #7191a4;
	border-radius:22px;
	width:720px;
	padding:52px;
	text-align:center
}
.dialog-card h2 {
	font-size:42px;
	margin:0 0 24px
}
.dialog-card p {
	font-size:24px;
	line-height:1.8;
	color:#bed0db;
	margin:0 0 36px
}
.dialog-card>div {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px
}
.secondary-button {
	border:1px solid #718696;
	background:transparent;
	color:#e4edf4;
	font-size:29px;
	border-radius:12px;
	min-height:88px
}
.connection {
	position:absolute;
	left:80px;
	right:80px;
	bottom:30px;
	background:#613027;
	border:1px solid #e5aa83;
	z-index:35;
	padding:20px;
	text-align:center;
	font-size:22px
}
.touch-ring {
	position:absolute;
	width:72px;
	height:72px;
	border:4px solid #ffac9c;
	border-radius:50%;
	pointer-events:none;
	z-index:13;
	animation:touch-ring .5s ease forwards
}
@keyframes count-pop {
	0% {
		opacity:0;
		transform:scale(1.5)
	}
	30% {
		opacity:1
	}
	100% {
		opacity:1;
		transform:scale(1)
	}
}
@keyframes card-enter {
	from {
		opacity:0;
		transform:translateY(24px) scale(.97)
	}
	to {
		opacity:1;
		transform:none
	}
}
@keyframes guide-float {
	50% {
		transform:translateY(-9px)
	}
}
@keyframes friend-celebrate {
	from {
		transform:rotate(-4deg) translateY(5px)
	}
	to {
		transform:rotate(4deg) translateY(-8px)
	}
}
@keyframes fire {
	from {
		opacity:.3;
		transform:scale(.85)
	}
	to {
		opacity:.9;
		transform:scale(1.1)
	}
}
@keyframes slot-pop {
	50% {
		transform:scale(1.18)
	}
}
@keyframes wrong-flash {
	0% {
		opacity:.8;
		border-width:12px;
		background:#ff443319
	}
	100% {
		opacity:0;
		border-width:0
	}
}
@keyframes timer-pulse {
	to {
		opacity:.65;
		transform:scale(.96)
	}
}
@keyframes touch-ring {
	from {
		opacity:.9;
		transform:scale(.4)
	}
	to {
		opacity:0;
		transform:scale(1.45)
	}
}
@media(prefers-reduced-motion:reduce) {
	.target-guide img,.result-friends img,.fire-glow {
		animation:none
	}
}

/* X의 중심은 전체 게임 화면의 가로·세로 정중앙입니다. */
.failure-screen {
	z-index:50;
	background:rgba(8, 12, 24, .8);
	backdrop-filter:blur(3px);
	touch-action:none
}
.failure-mark {
	position:absolute;
	left:50%;
	top:50%;
	width:270px;
	height:270px;
	transform:translate(-50%,-50%);
	display:grid;
	place-items:center;
	border:3px solid #ff8c89;
	border-radius:50%;
	background:#421e2a;
	box-shadow:0 0 90px #ff4c6133;
	animation:failure-enter .18s ease-out
}
.failure-mark svg {
	width:205px;
	height:205px;
	fill:none;
	stroke:#ff8c89;
	stroke-width:13;
	stroke-linecap:round
}
.failure-message {
	position:absolute;
	top:calc(50% + 170px);
	left:0;
	width:100%;
	text-align:center
}
.failure-message h2 {
	margin:0 0 18px;
	font-size:46px;
	color:#fff2ee
}
.failure-message p {
	margin:0;
	font-size:30px;
	color:#ffb4ac
}
@keyframes failure-enter {
	from { opacity:.3; transform:translate(-50%,-50%) scale(.78) }
	to { opacity:1; transform:translate(-50%,-50%) scale(1) }
}