@font-face {
	font-family: 'FW Mono';
	src: url('../files/RobotoMono-Medium.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'Squaredance';
	src: url('../files/SquaredanceFontV1-Regular.ttf') format('truetype');
	font-display: swap;
}

:root {
	--ink: #eaf6ff;
	--ink-dim: #9cc9ff;
	--deep: #020a1f;
	--navy: #071a45;
	--panel: rgba(5, 20, 58, 0.82);
	--blue: #1d4fd8;
	--sky: #3aa0ff;
	--cyan: #7fe9ff;
	--line: #5fa8ff;
	--warn: #ff6b8b;
	--gold: #ffd36b;
	--shadow: 4px 4px 0 rgba(0, 4, 20, 0.55);
	--mono: 'FW Mono', 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace;
	--sans: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Pretendard', system-ui, sans-serif;
}

:root:lang(ja) { --sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Noto Sans JP', 'Meiryo', system-ui, sans-serif; }
:root:lang(en) { --sans: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
:root:lang(ja) #dialog.narrator #dialog-text { font-style: normal; }

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: var(--deep);
	color: var(--ink);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	/* 당겨서 새로고침만 막는다. 가로까지 막으면 크롬 트랙패드 스와이프 뒤로가기가 안 된다 */
	overscroll-behavior-y: none;
	touch-action: none;
}

#app, #app canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* 두 번 탭 확대 막기: touch-action은 상속되지 않아서 요소마다 직접 건다 */
#app, #app canvas, #hud, .win, button, #touch, #touch *, #card, #banner, #prompt, #fade { touch-action: none; }
.overlay, .overlay .win { touch-action: pan-y; }
input { touch-action: manipulation; }

.hidden { display: none !important; }
.mono { font-family: var(--mono); letter-spacing: 0.06em; }
.tiny { font-size: 11px; }

/* ---------- 레트로 창 ---------- */
.win {
	background: var(--panel);
	border: 2px solid var(--line);
	box-shadow: inset 0 0 0 2px #0b1f4d, var(--shadow);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.win-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 3px 8px;
	background: linear-gradient(90deg, var(--blue), var(--sky));
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #fff;
	text-transform: uppercase;
	white-space: nowrap;
}

.win-bar i {
	flex: none;
	width: 6px; height: 6px;
	margin-right: 20px;
	background: #fff;
	box-shadow: 10px 0 0 #fff, 20px 0 0 rgba(255, 255, 255, 0.45);
}

.win-body { padding: 10px 12px; }

.btn {
	font: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--blue);
	border: 2px solid #cfe6ff;
	box-shadow: var(--shadow);
	padding: 10px 18px;
	cursor: pointer;
	transition: transform 0.08s, background 0.2s;
}
.btn:hover { background: var(--sky); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0,4,20,0.55); }
.btn.big { font-size: 18px; padding: 14px 30px; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: rgba(58, 160, 255, 0.2); }

.chip {
	font: 12px var(--mono);
	color: var(--ink);
	background: rgba(29, 79, 216, 0.35);
	border: 1px solid var(--line);
	padding: 3px 8px;
	cursor: pointer;
}
.chip:hover { background: rgba(58, 160, 255, 0.45); }
.chip.off { opacity: 0.5; text-decoration: line-through; }

.meter {
	height: 10px;
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.35);
	padding: 1px;
}
.meter > div {
	height: 100%;
	width: 100%;
	background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, transparent 6px 8px);
	transition: width 0.1s linear;
}
.meter.dash > div { background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 8px); box-shadow: 0 0 8px rgba(255, 211, 107, 0.6); }
.meter.low > div { background: repeating-linear-gradient(90deg, var(--warn) 0 6px, transparent 6px 8px); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud .win, #hud button { pointer-events: auto; }

#hud-status { position: absolute; top: 14px; left: 14px; width: 210px; }
#hearts { display: flex; gap: 6px; margin-bottom: 8px; }
#hearts svg { width: 22px; height: 20px; image-rendering: pixelated; }
#hearts svg.lost { opacity: 0.25; }
#hearts.hit { animation: shake 0.4s; }
.meter-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; color: var(--ink-dim); }

#hud-objective {
	position: absolute; top: 14px; left: 50%;
	transform: translateX(-50%);
	min-width: 280px; max-width: min(520px, calc(100vw - 500px));
	text-align: center;
}
#hud-objective.pulse { animation: objpulse 1.2s ease-out; }
#hud-objective.pulse #obj-text { animation: objflash 1.2s ease-out; }
/* 한국어는 낱말 중간에서 줄을 바꾸지 않는다 */
html[lang="ko"] #obj-text { word-break: keep-all; }
#obj-text { font-size: 15px; font-weight: 700; line-height: 1.4; }
#obj-dist { color: var(--cyan); margin-top: 2px; }

#hud-party { position: absolute; top: 14px; right: 14px; width: 210px; }
#party { display: flex; gap: 6px; margin-bottom: 8px; min-height: 52px; }
.slot {
	width: 52px; height: 52px;
	border: 1px dashed rgba(95, 168, 255, 0.5);
	background: rgba(0, 0, 0, 0.25) center / 120% no-repeat;
	position: relative;
	display: grid; place-items: center;
	color: rgba(156, 201, 255, 0.4);
	font: 18px var(--mono);
}
.slot.on { border-style: solid; border-color: var(--cyan); color: transparent; }
.slot.gone { filter: grayscale(1) brightness(0.6); border-color: rgba(255,255,255,0.3); }
.slot small {
	position: absolute; bottom: -1px; left: 0; right: 0;
	font: 9px var(--mono); letter-spacing: 0.08em; text-align: center;
	color: var(--ink); background: rgba(2, 10, 31, 0.75);
}
.party-meta { display: flex; gap: 6px; }
.party-meta .chip { white-space: nowrap; }

#hud-boss { position: absolute; top: 116px; left: 50%; transform: translateX(-50%); width: 300px; text-align: center; }
#boss-gauge { display: flex; gap: 6px; justify-content: center; margin-bottom: 4px; }
#boss-gauge span {
	width: 40px; height: 14px; border: 1px solid var(--line);
	background: rgba(0,0,0,0.3);
}
#boss-gauge span.on { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
#boss-hint { color: var(--ink-dim); }

/* POD 창 버튼 줄 끝의 고래 칩: 누르면 첫 화면으로 */
#btn-home { display: inline-grid; place-items: center; text-decoration: none; }
#btn-home svg { width: 20px; height: 14px; fill: var(--ink); stroke: var(--ink); stroke-width: 10; }

#minimap-wrap { position: absolute; right: 14px; bottom: 14px; transition: opacity 0.25s, transform 0.25s; }
/* 대화 중엔 어차피 못 움직이니, 대화창과 겹치는 화면에서는 소나를 잠깐 내려 둔다 */
@media (max-width: 1200px) {
	body.talking #minimap-wrap { opacity: 0; transform: translateY(16px); pointer-events: none; }
}
#minimap { display: block; width: 180px; height: 180px; }

#marker {
	position: absolute; left: 0; top: 0;
	transform: translate(-50%, -100%);
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	font: 11px var(--mono); color: var(--gold);
	text-shadow: 0 0 6px rgba(0,0,0,0.9);
}
#marker .diamond {
	width: 14px; height: 14px; border: 2px solid var(--gold);
	transform: rotate(45deg);
	animation: bob 1.4s ease-in-out infinite;
	box-shadow: 0 0 10px rgba(255, 211, 107, 0.7);
}
#edge-arrow {
	position: absolute; left: 0; top: 0;
	transform: translate(-50%, -50%);
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	font: 11px var(--mono); color: var(--gold);
	text-shadow: 0 0 6px #000;
}
#edge-arrow .arrow {
	width: 0; height: 0;
	border-left: 9px solid transparent; border-right: 9px solid transparent;
	border-bottom: 16px solid var(--gold);
	filter: drop-shadow(0 0 6px rgba(255, 211, 107, 0.8));
}

#prompt {
	position: absolute; left: 50%; bottom: 34%;
	transform: translateX(-50%);
	padding: 6px 12px;
	font-size: 14px; font-weight: 700;
	background: var(--panel); border: 2px solid var(--cyan);
	box-shadow: var(--shadow);
	animation: bob 1.6s ease-in-out infinite;
}
#prompt kbd, .help kbd {
	font: 11px var(--mono);
	padding: 1px 6px; margin-right: 4px;
	border: 1px solid var(--cyan); background: rgba(127, 233, 255, 0.15);
}

/* PC: HAZEL 창 아래 작은 조작 안내 */
#hud-keys {
	position: absolute; top: 108px; left: 14px; width: 210px;
	display: flex; flex-wrap: wrap; gap: 4px 10px;
	font-size: 11px; color: var(--ink-dim);
	text-shadow: 0 1px 3px rgba(0, 4, 20, 0.9);
	pointer-events: none;
}
#hud-keys em { font-style: normal; }
#hud-keys kbd {
	font: 10px var(--mono); color: var(--ink);
	padding: 1px 4px; margin-right: 4px;
	background: rgba(5, 20, 58, 0.7); border: 1px solid var(--line);
}

#toasts { position: absolute; left: 14px; top: 160px; display: flex; flex-direction: column; gap: 6px; }
.toast {
	padding: 6px 10px; font-size: 13px;
	background: var(--panel); border-left: 4px solid var(--cyan);
	box-shadow: var(--shadow);
	animation: toastin 0.3s ease-out, toastout 0.4s ease-in 3.2s forwards;
}

/* 목표 배너: 화면 가운데에서 크게 */
#banner {
	position: absolute; left: 0; right: 0; top: 30%;
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 18px 0 20px;
	background: linear-gradient(90deg, transparent, rgba(29, 79, 216, 0.85) 20%, rgba(29, 79, 216, 0.85) 80%, transparent);
	border-top: 2px solid rgba(127, 233, 255, 0.8);
	border-bottom: 2px solid rgba(127, 233, 255, 0.8);
	text-align: center;
	animation: bannerin 0.5s cubic-bezier(.2,1.4,.4,1);
}
#banner.out { animation: bannerout 0.5s ease-in forwards; }
#banner small { font: 12px var(--mono); letter-spacing: 0.4em; color: var(--cyan); }
#banner strong { font-size: clamp(22px, 4vw, 36px); font-weight: 800; letter-spacing: -0.01em; text-shadow: 3px 3px 0 rgba(0, 4, 20, 0.6); }
#banner em { font-style: normal; font-size: 14px; color: var(--ink-dim); }
#banner.join { background: linear-gradient(90deg, transparent, rgba(16, 120, 160, 0.9) 20%, rgba(16, 120, 160, 0.9) 80%, transparent); }
#banner.sad { background: linear-gradient(90deg, transparent, rgba(30, 30, 60, 0.92) 20%, rgba(30, 30, 60, 0.92) 80%, transparent); border-color: rgba(200, 200, 255, 0.4); }
#banner.sad small { color: #c9c9ff; }

/* ---------- 대화 ---------- */
#dialog {
	position: fixed; left: 50%; bottom: 22px;
	transform: translateX(-50%);
	width: min(760px, calc(100vw - 24px));
	z-index: 5;
	cursor: pointer;
	animation: dialogin 0.25s ease-out;
}
#dialog .win-body { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; min-height: 112px; position: relative; }
#dialog.no-portrait .win-body { grid-template-columns: 1fr; }
#dialog.no-portrait #dialog-portrait { display: none; }
#dialog-portrait {
	width: 88px; height: 88px;
	border: 2px solid var(--line);
	background: radial-gradient(circle at 50% 40%, #1d4fd8, #020a1f) center / cover;
	background-size: cover;
	image-rendering: auto;
}
#dialog-text { margin: 0; font-size: 17px; line-height: 1.65; white-space: pre-line; min-height: 56px; }
#dialog.narrator #dialog-text { color: var(--ink-dim); font-style: italic; }
#dialog.hertz #dialog-text { color: var(--cyan); }
#dialog-next { position: absolute; right: 12px; bottom: 6px; font-size: 12px; color: var(--cyan); animation: blink 0.9s steps(2) infinite; }

/* ---------- 따라 부르기: 상대 리듬을 듣고 같은 박자로 대답 ---------- */
#song {
	position: fixed; left: 50%; bottom: 22px;
	transform: translateX(-50%);
	width: min(420px, calc(100vw - 24px));
	z-index: 5;
	text-align: center;
	cursor: pointer;
}
#song-beats { display: flex; justify-content: center; gap: 16px; margin: 8px 0 10px; }
#song-beats span {
	width: 20px; height: 20px;
	border: 2px solid var(--line);
	background: rgba(0, 0, 0, 0.3);
	transform: rotate(45deg);
	transition: background 0.08s, box-shadow 0.08s;
}
#song-beats span.them { background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
#song-beats span.ok { background: var(--gold); box-shadow: 0 0 14px var(--gold); }
#song-beats span.bad { background: var(--warn); }
#song-hint { margin: 0; font-size: 15px; color: var(--ink-dim); }
#song.turn #song-hint { color: var(--cyan); font-weight: 700; }
body.singing #stick, body.singing #minimap-wrap { opacity: 0; pointer-events: none; }

/* ---------- 스텔라와 듀엣 (리듬 게임) ---------- */
#duet {
	position: fixed; left: 50%; bottom: 22px;
	transform: translateX(-50%);
	width: min(560px, calc(100vw - 24px));
	z-index: 5;
}
#duet-track { position: relative; height: 76px; overflow: hidden; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(95, 168, 255, 0.35); }
.duet-lane { position: absolute; left: 0; right: 0; height: 38px; display: flex; align-items: center; padding-left: 8px; cursor: pointer; }
.duet-lane[data-lane="S"] { top: 0; border-bottom: 1px dashed rgba(95, 168, 255, 0.25); }
.duet-lane[data-lane="J"] { top: 38px; }
.duet-lane b { width: 24px; text-align: center; font: 18px var(--mono); color: var(--ink-dim); }
.duet-lane.flash { background: rgba(127, 233, 255, 0.12); }
.duet-lane.flash b { color: #fff; text-shadow: 0 0 10px var(--cyan); }
#duet-line { position: absolute; top: 0; bottom: 0; left: 44px; width: 3px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); pointer-events: none; }
.duet-note {
	position: absolute; left: 0;
	width: 24px; height: 24px; margin: -12px 0 0 -12px;
	border-radius: 50%;
	display: grid; place-items: center;
	font: 14px/1 var(--mono); color: #04102e;
	will-change: transform;
	pointer-events: none;
}
.duet-note.S { top: 19px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.duet-note.J { top: 57px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.duet-note.hit { visibility: hidden; }
.duet-note.miss { background: #3b4a78; box-shadow: none; opacity: 0.6; }
#duet-info { display: flex; justify-content: space-between; margin-top: 6px; font: 700 13px var(--mono); min-height: 16px; }
#duet-judge.perfect { color: var(--gold); text-shadow: 0 0 14px var(--gold); }
#duet-judge.excellent { color: #fff2c4; text-shadow: 0 0 12px rgba(255, 226, 150, 0.85); }
#duet-judge.good { color: var(--cyan); text-shadow: 0 0 12px var(--cyan); }
#duet-judge.miss { color: var(--warn); text-shadow: 0 0 12px var(--warn); }
#duet-combo { color: var(--ink-dim); }
#duet-stars { color: var(--gold); letter-spacing: 0.08em; }
#duet-stars.full { text-shadow: 0 0 10px var(--gold); }
#duet-help { margin: 4px 0 0; font-size: 12px; color: var(--ink-dim); text-align: center; }

/* ---------- 챕터 카드 ---------- */
#card {
	position: fixed; inset: 0; z-index: 8;
	display: grid; place-items: center;
	background: radial-gradient(ellipse at center, rgba(7, 26, 69, 0.75), rgba(2, 10, 31, 0.96));
	animation: cardin 0.8s ease-out;
	pointer-events: none;
}
#card.out { animation: cardout 0.9s ease-in forwards; }
#card::after {
	content: ''; position: absolute; inset: 0;
	background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
	pointer-events: none;
}
.card-inner { text-align: center; padding: 0 20px; }
#card-num {
	display: inline-block;
	font: 13px var(--mono); letter-spacing: 0.6em; color: var(--cyan);
	padding: 4px 4px 4px 12px; border: 1px solid var(--cyan);
	margin-bottom: 18px;
}
#card-title {
	margin: 0; font-size: clamp(40px, 9vw, 86px); font-weight: 900; letter-spacing: -0.02em;
	text-shadow: 5px 5px 0 var(--blue), 0 0 40px rgba(58, 160, 255, 0.6);
	animation: titlein 1.1s cubic-bezier(.2,1,.3,1);
}
#card-sub { margin: 18px 0 0; font-size: 16px; color: var(--ink-dim); white-space: pre-line; line-height: 1.7; }

/* 주파수 눈금 (프롤로그) */
.spectrum { width: min(560px, 86vw); margin: 34px auto 0; text-align: left; }
.spec-track {
	position: relative; height: 64px;
	border-bottom: 2px solid var(--line);
	background: repeating-linear-gradient(90deg, rgba(95, 168, 255, 0.18) 0 1px, transparent 1px calc(100% / 12));
}
.spec-band, .spec-mark {
	position: absolute; bottom: 0;
	display: flex; flex-direction: column; justify-content: flex-end;
	font: 10px var(--mono); letter-spacing: 0.04em; color: var(--ink-dim);
	padding: 0 0 6px 6px;
}
.spec-band b, .spec-mark b { font: 700 12px var(--sans); color: var(--ink); letter-spacing: 0; white-space: nowrap; }
.spec-band, .spec-mark { white-space: nowrap; }
.spec-band { height: 34px; background: rgba(58, 160, 255, 0.28); border-top: 2px solid var(--sky); }
.spec-band.blue { height: 46px; background: rgba(29, 79, 216, 0.4); border-top-color: #8fb4ff; }
.spec-mark { height: 64px; border-left: 2px solid var(--cyan); color: var(--cyan); animation: specpulse 1.4s ease-in-out infinite; }
.spec-mark b { color: var(--cyan); }
.spec-axis { display: flex; justify-content: space-between; font: 10px var(--mono); color: var(--ink-dim); margin-top: 4px; }
@keyframes specpulse { 50% { box-shadow: -6px 0 18px -6px var(--cyan); } }

/* ---------- 오버레이 ---------- */
.overlay {
	position: fixed; inset: 0; z-index: 9;
	display: grid; place-items: center;
	background: rgba(2, 10, 31, 0.6);
	padding: 16px;
}
.overlay > .win { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.overlay .row { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

.paper .win-body { padding: 20px 22px; }
#letter-body { font-size: 18px; line-height: 1.9; white-space: pre-line; min-height: 120px; }
#letter-body.scrambled { font-family: var(--mono); color: var(--ink-dim); letter-spacing: 0.15em; filter: blur(0.4px); animation: jitter 0.2s steps(2) infinite; }
#letter-from { margin-top: 14px; text-align: right; color: var(--cyan); font-size: 14px; }
#letter .btn, #journal .btn { margin-top: 18px; }

#journal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
#journal-list li { border: 1px solid rgba(95, 168, 255, 0.4); padding: 10px 12px; background: rgba(0,0,0,0.2); }
#journal-list li b { display: block; font: 11px var(--mono); color: var(--cyan); letter-spacing: 0.1em; margin-bottom: 4px; }
#journal-list li p { margin: 0; white-space: pre-line; line-height: 1.6; font-size: 14px; }
#journal-list li.unread p { font-family: var(--mono); color: var(--ink-dim); }
#journal-list li.empty { text-align: center; color: var(--ink-dim); border-style: dashed; }

.help { display: grid; gap: 8px; font-size: 14px; }
.lab { display: grid; gap: 6px; margin-top: 12px; padding: 8px 10px; border: 1px dashed var(--line); }
.lab-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lab .chip { font-family: var(--sans); font-size: 13px; padding: 5px 10px; }
.lab .chip.on { background: var(--sky); color: var(--deep); }
.lab-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-dim); }
.lab-note.warn { color: var(--warn); }

/* ---------- 타이틀 ---------- */
#title { background: radial-gradient(ellipse at 50% 60%, rgba(2, 10, 31, 0.15), rgba(2, 10, 31, 0.75)); z-index: 10; }
.title-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
#logo-whale { width: 150px; height: 112px; fill: var(--cyan); filter: drop-shadow(0 0 18px rgba(127, 233, 255, 0.6)); animation: bob 3s ease-in-out infinite; }
.logo {
	margin: 0;
	font-family: 'Squaredance', var(--mono); font-weight: 400;
	font-size: clamp(44px, 10vw, 96px); letter-spacing: 0.02em;
	color: #fff;
	text-shadow: 4px 4px 0 var(--blue), 8px 8px 0 rgba(0, 4, 20, 0.6), 0 0 50px rgba(58, 160, 255, 0.55);
}
.logo span { color: var(--cyan); }
/* 아직 개발 중 표시 */
.logo .beta {
	display: inline-block;
	margin-left: 0.4em;
	padding: 3px 6px 1px;
	font: 12px var(--mono); letter-spacing: 0.1em;
	color: var(--deep); background: var(--cyan);
	text-shadow: none;
	vertical-align: top;
}
.tagline { margin: 0; color: var(--ink-dim); line-height: 1.7; font-size: 15px; }
.home-link {
	position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); left: 16px;
	font: 16px 'Squaredance', var(--mono); letter-spacing: 0.06em;
	color: var(--ink); text-decoration: none; opacity: 0.8;
}
.home-link:hover { opacity: 1; color: var(--cyan); }
#loading { width: 240px; color: var(--ink-dim); display: grid; gap: 6px; }
#title-buttons { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 6px; }
.title-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.name-field { display: flex; align-items: center; gap: 10px; color: var(--ink-dim); }
.lang-switch { display: flex; gap: 0; border: 2px solid var(--line); box-shadow: var(--shadow); }
.lang-switch button {
	font: 700 13px var(--sans);
	color: var(--ink-dim);
	background: rgba(2, 10, 31, 0.7);
	border: 0;
	border-right: 1px solid rgba(95, 168, 255, 0.4);
	padding: 7px 14px;
	cursor: pointer;
}
.lang-switch button:last-child { border-right: 0; }
.lang-switch button:hover { color: var(--ink); background: rgba(58, 160, 255, 0.25); }
.lang-switch button.on { color: #fff; background: var(--blue); }
.lang-switch button:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
#pause .name-field { justify-content: center; margin-top: 16px; }
.name-field input {
	width: 170px;
	font: 700 16px var(--sans);
	color: var(--ink);
	text-align: center;
	padding: 8px 10px;
	background: rgba(2, 10, 31, 0.7);
	border: 2px solid var(--line);
	box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4);
	outline: none;
	user-select: text;
	-webkit-user-select: text;
}
.name-field input::placeholder { color: rgba(156, 201, 255, 0.55); }
.name-field input:focus { border-color: var(--cyan); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(127, 233, 255, 0.25); }
.quote { margin: 8px 0 0; color: var(--ink); font-size: 15px; line-height: 1.8; opacity: 0.9; }
.quote.big { font-size: 22px; font-weight: 700; text-align: center; margin: 10px 0 18px; }
.controls { color: var(--ink-dim); opacity: 0.7; }

#ending { z-index: 25; }
#ending .win { text-align: center; }
#ending-stats { color: var(--ink-dim); line-height: 2; }
#ending-stats .gold { color: var(--gold); text-shadow: 0 0 12px var(--gold); font-weight: 700; }
#ending-list { list-style: none; margin: 10px auto 4px; padding: 8px 12px; max-width: 380px; display: grid; gap: 4px; text-align: left; border: 1px dashed var(--line); font-size: 13px; }
#ending-list .head { font: 11px var(--mono); letter-spacing: 0.12em; color: var(--cyan); text-align: center; }
#ending-list li { color: var(--ink-dim); }
#ending-list li small { display: block; padding-left: 1.3em; font-size: 11px; opacity: 0.8; }
#ending-list li.seen { color: var(--ink); }
#ending-list li.now { color: var(--gold); }
#ending-list li.star { color: var(--gold); }
#title-endings { color: var(--gold); letter-spacing: 0.12em; margin: 4px 0 0; }

/* 듀엣 점수판 */
#scores { z-index: 26; }
#scores .win { width: min(440px, calc(100vw - 24px)); text-align: center; }
#scores .win-body { display: grid; gap: 10px; justify-items: center; }
#score-mine { margin: 0; color: var(--gold); letter-spacing: 0.08em; }
#score-form { display: grid; gap: 10px; justify-items: center; }
#song-name { width: 220px; }
#score-status { margin: 0; min-height: 1em; color: var(--cyan); }
#score-list { list-style: none; margin: 0; padding: 8px 12px; width: 100%; box-sizing: border-box; display: grid; gap: 4px; text-align: left; border: 1px dashed var(--line); font-size: 13px; max-height: 40vh; overflow-y: auto; }
#score-list li { display: grid; grid-template-columns: 2em 1fr; column-gap: 6px; color: var(--ink); }
#score-list li.empty { display: block; text-align: center; color: var(--ink-dim); }
#score-list li.me { color: var(--gold); }
#score-list .place { grid-row: span 2; font: 700 15px var(--mono); color: var(--cyan); align-self: center; }
#score-list li.me .place { color: var(--gold); }
#score-list b { overflow-wrap: anywhere; }
#score-list small { color: var(--ink-dim); font-size: 11px; }
@media (max-height: 520px) {
	#scores .win-body { gap: 6px; }
	#score-list { max-height: 34vh; }
}

/* 부서진 나침반 게이지 (소나 창 제목줄) */
#compass-meter { display: flex; align-items: center; gap: 5px; }
#compass-meter[hidden] { display: none; }
#compass-meter small { font-size: 9px; letter-spacing: 0.08em; }
#compass-meter .gauge { display: block; width: 38px; height: 5px; background: rgba(2, 10, 31, 0.6); }
#compass-meter .fill { display: block; height: 100%; background: #9d8cff; transition: width 0.3s; }
#compass-meter.weak .fill { background: var(--warn); animation: blink 0.8s steps(2) infinite; }
#btn-feedback { margin-top: 14px; font: 13px var(--sans); padding: 5px 12px; }
#feedback { margin-top: 10px; }
#feedback textarea {
	width: 100%; resize: vertical;
	font: 14px/1.5 var(--sans); color: var(--ink);
	background: rgba(2, 10, 31, 0.6); border: 1px solid var(--line);
	padding: 8px 10px;
	touch-action: auto;
}
#feedback textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
body.touch #feedback textarea { font-size: 16px; } /* iOS가 입력할 때 화면을 확대하지 않게 */
#feedback .row { margin-top: 8px; }
#feedback-status { margin: 8px 0 0; font-size: 13px; color: var(--ink-dim); line-height: 1.7; }
#feedback-status b { color: var(--ink); user-select: all; }
#feedback-status .chip { text-decoration: none; }

#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 20; transition: opacity 1s; }
#error .chip { margin-top: 8px; font-size: 13px; padding: 6px 12px; }
#error { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; padding: 12px; background: #3a0b1f; border: 2px solid var(--warn); font: 12px var(--mono); white-space: pre-wrap; }

/* ---------- 모바일 ---------- */
body.touch .key-only, body:not(.touch) .touch-only { display: none !important; }
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
/* 대화 중엔 못 움직이니 조이스틱은 잠깐 숨긴다 (대화창에 가려지지 않게) */
#stick, #touch-buttons { transition: opacity 0.2s; }
body.talking #stick { opacity: 0; pointer-events: none; }
body.tilt #stick { display: none; }
#stick {
	position: absolute; left: 24px; bottom: 24px;
	width: 130px; height: 130px; border-radius: 50%;
	border: 2px solid rgba(127, 233, 255, 0.5);
	background: rgba(5, 20, 58, 0.4);
	pointer-events: auto;
}
#stick-knob {
	position: absolute; left: 50%; top: 50%;
	width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
	background: rgba(127, 233, 255, 0.35); border: 2px solid var(--cyan);
}
#touch-buttons { position: absolute; right: 18px; bottom: 210px; display: grid; gap: 10px; pointer-events: auto; }
#touch-buttons button {
	width: 64px; height: 64px;
	font: 22px var(--mono); color: #fff;
	background: rgba(29, 79, 216, 0.6); border: 2px solid var(--cyan);
	box-shadow: var(--shadow);
	display: grid; place-items: center; line-height: 1;
}
#touch-buttons small { font-size: 8px; letter-spacing: 0.1em; }
#touch-buttons button.held { background: var(--sky); }

/* 데스크탑: 목표는 HAZEL 창 안 아래쪽 칸에 (화면 가운데 위를 비운다) */
@media (min-width: 761px) {
	body:not(.touch) #hud-status { width: 250px; height: 152px; }
	body:not(.touch) #hud-objective {
		top: 100px; left: 16px; right: auto; width: 246px; height: 62px;
		transform: none; min-width: 0; max-width: none;
		text-align: left;
		background: none; border: 0; border-top: 1px dashed rgba(95, 168, 255, 0.45);
		box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
		animation: none;
	}
	body:not(.touch) #hud-objective .win-bar { display: none; }
	body:not(.touch) #hud-objective .win-body { height: 100%; padding: 4px 10px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
	body:not(.touch) #obj-text { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
	body:not(.touch) #obj-dist { margin: 0; font-size: 10px; line-height: 1; white-space: nowrap; }
	body:not(.touch) #obj-dist::before { content: attr(data-chapter) '  '; color: var(--ink-dim); white-space: pre; }
	body:not(.touch) #hud-keys { top: 174px; width: 250px; }
	body:not(.touch) #toasts { top: 226px; }
	body:not(.touch) #hud-boss { top: 14px; }
}

@media (max-width: 760px) {
	#hud-status, #hud-party { width: 160px; }
	#hud-status { top: 8px; left: 8px; }
	#hud-party { top: 8px; right: 8px; }
	#hud-objective { top: auto; bottom: 168px; min-width: 0; max-width: calc(100vw - 180px); left: 50%; }
	#minimap-wrap { right: 8px; bottom: 8px; }
	#compass-meter small { display: none; }
	#minimap { width: 120px; height: 120px; }
	#touch-buttons { bottom: 160px; right: 10px; }
	#dialog { bottom: 8px; }
	#dialog .win-body { grid-template-columns: 56px 1fr; }
	#dialog-portrait { width: 56px; height: 56px; }
	#dialog-text { font-size: 15px; }
	#toasts { top: 110px; left: 8px; }
	#hud-keys { top: 100px; left: 8px; width: 160px; }
	body:not(.touch) #toasts { top: 150px; }
	.slot { width: 40px; height: 40px; }
	#party { min-height: 40px; }
	.party-meta { gap: 3px; }
	.party-meta .chip { padding: 3px 5px; }
	#btn-home svg { width: 18px; }
}

/* 세로 폰: 조이스틱을 줄이고, 목표 창은 조이스틱과 소나 사이 아래쪽으로 내려서 화면 가운데를 비운다 */
@media (max-width: 760px) and (orientation: portrait) {
	body.touch #stick { left: 14px; bottom: 18px; width: 104px; height: 104px; }
	/* 그림은 작아져도 손가락이 닿는 범위는 넉넉하게 */
	body.touch #stick::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; }
	body.touch #stick-knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
	/* 목표: HAZEL 창을 POD 높이까지 늘리고, 그 안 아래쪽에 넣는다 (아래쪽은 엄지에 가려서 읽기 어렵다) */
	body.touch #hud-status { height: 117px; }
	body.touch #hud-status .win-body { padding: 6px 10px; }
	body.touch #hearts { margin-bottom: 4px; }
	body.touch #hud-objective {
		top: 82px; bottom: auto; left: 10px; right: auto; width: 156px; height: 41px;
		transform: none; min-width: 0; max-width: none;
		text-align: left;
		background: none; border: 0; border-top: 1px dashed rgba(95, 168, 255, 0.45);
		box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
		animation: none;
	}
	body.touch #hud-objective .win-bar { display: none; }
	body.touch #hud-objective .win-body { height: 100%; padding: 3px 8px; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
	body.touch #obj-text { font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	body.touch #obj-dist { margin: 0; font-size: 10px; line-height: 1; white-space: nowrap; }
	body.touch #obj-dist::before { content: attr(data-chapter) '  '; color: var(--ink-dim); white-space: pre; }
	body.touch #toasts { top: 133px; }
}

/* 가로로 든 폰: 버튼을 소나 왼쪽에 한 줄로 */
@media (pointer: coarse) and (max-height: 520px) {
	/* HAZEL · POD 창은 0.72배로 (목표 칸이 들어가며 HAZEL 창이 길어져서) */
	#hud-status { top: 6px; left: 6px; transform: scale(0.72); transform-origin: top left; }
	#hud-party { top: 6px; right: 6px; transform: scale(0.72); transform-origin: top right; }
	#hud-objective { top: 6px; bottom: auto; max-width: calc(100vw - 400px); min-width: 0; }
	#hud-objective .win-body { padding: 6px 10px; }
	#obj-text { font-size: 13px; }
	#hud-boss { top: 78px; }
	#minimap { width: 110px; height: 110px; }
	#minimap-wrap { right: 6px; bottom: 6px; }
	/* 나침반 게이지가 붙으면 소나 창이 넓어지니까 그만큼 비켜 둔다 */
	#touch-buttons { grid-auto-flow: column; right: 196px; bottom: 12px; }
	#touch-buttons button { width: 58px; height: 58px; }
	#stick { left: 16px; bottom: 16px; width: 120px; height: 120px; }
	body.talking #touch-buttons { opacity: 0; pointer-events: none; }
	#song, #duet { bottom: 84px; }
	/* 기울기 모드: 조이스틱 자리(왼쪽 아래)가 비니까 따라 부르기 창을 그쪽으로 작게 옮긴다 */
	body.tilt #song { left: 10px; bottom: 10px; transform: none; width: min(300px, 38vw); }
	body.tilt #song .win-body { padding: 4px 10px 6px; }
	body.tilt #song-beats { gap: 11px; margin: 6px 0; }
	body.tilt #song-beats span { width: 14px; height: 14px; }
	body.tilt #song-hint { font-size: 12px; }
	/* 대화창: 아래쪽 가운데에 얇게 한 줄 (대화 중엔 조이스틱 · 버튼 · 소나가 숨어서 자리가 빈다) */
	#dialog { bottom: 6px; width: min(700px, calc(100vw - 24px)); }
	#dialog .win-bar { position: absolute; left: 10px; top: -9px; padding: 1px 7px; font-size: 9px; }
	#dialog .win-bar i { display: none; }
	#dialog .win-body { display: flex; align-items: center; gap: 8px; min-height: 0; padding: 9px 26px 6px 8px; }
	#dialog-portrait { width: 30px; height: 30px; flex: none; border-width: 1px; }
	#dialog-text { font-size: 13px; line-height: 1.45; min-height: 0; white-space: normal; }
	#dialog-next { right: 9px; bottom: auto; top: 50%; margin-top: -8px; }
	#toasts { top: 96px; }
	#banner { top: 24%; padding: 10px 0 12px; }
	#card-title { font-size: clamp(34px, 12vh, 64px); }
	.spectrum { margin-top: 16px; }
	/* 목표: 데스크탑처럼 HAZEL 창 안 아래쪽 칸에. HAZEL 창과 같은 비율(0.72)로 줄인다 */
	#hud-status { width: 210px; height: 152px; }
	#hud-objective {
		top: 68px; left: 7px; right: auto; width: 206px; height: 62px;
		transform: scale(0.72); transform-origin: top left;
		min-width: 0; max-width: none;
		text-align: left;
		background: none; border: 0; border-top: 1px dashed rgba(95, 168, 255, 0.45);
		box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
		animation: none;
	}
	#hud-objective .win-bar { display: none; }
	#hud-objective .win-body { height: 100%; padding: 4px 10px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
	#obj-text { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
	#obj-dist { margin: 0; font-size: 11px; line-height: 1; white-space: nowrap; }
	#obj-dist::before { content: attr(data-chapter) '  '; color: var(--ink-dim); white-space: pre; }
	#toasts { top: 126px; }
	#hud-boss { top: 6px; }
}

/* ---------- 애니메이션 ---------- */
@keyframes bob { 50% { transform: translateY(-5px); } }
#marker .diamond { animation-name: diamondbob; }
@keyframes diamondbob { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(-3px, -3px); } }
#prompt { animation-name: promptbob; }
@keyframes promptbob { 0%, 100% { transform: translateX(-50%); } 50% { transform: translate(-50%, -4px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes objflash { 0% { color: var(--cyan); text-shadow: 0 0 12px var(--cyan); } }
@keyframes objpulse { 0% { box-shadow: inset 0 0 0 2px #0b1f4d, 0 0 0 0 rgba(127, 233, 255, 0.9); } 100% { box-shadow: inset 0 0 0 2px #0b1f4d, 0 0 0 24px rgba(127, 233, 255, 0); } }
@keyframes toastin { from { transform: translateX(-20px); opacity: 0; } }
@keyframes toastout { to { transform: translateX(-20px); opacity: 0; } }
@keyframes bannerin { from { transform: scaleY(0); opacity: 0; } }
@keyframes bannerout { to { transform: scaleY(0); opacity: 0; } }
@keyframes dialogin { from { transform: translate(-50%, 20px); opacity: 0; } }
@keyframes cardin { from { opacity: 0; } }
@keyframes cardout { to { opacity: 0; } }
@keyframes titlein { from { letter-spacing: 0.4em; opacity: 0; filter: blur(8px); } }
@keyframes jitter { 50% { transform: translateX(1px); } }

/* 폰 가로 모드 타이틀: 세로가 짧아서 왼쪽에 로고 · 소개, 오른쪽에 언어 · 닉네임 · 시작을 두 칸으로 */
@media (max-height: 520px) and (orientation: landscape) {
	#title { overflow-y: auto; }
	.title-inner { display: grid; grid-template-columns: auto auto; column-gap: clamp(24px, 6vw, 64px); row-gap: 6px; align-items: center; justify-items: center; }
	#logo-whale { grid-area: 1 / 1; width: 80px; height: 60px; }
	.logo { grid-area: 2 / 1; font-size: clamp(30px, 6.5vw, 54px); }
	.logo .beta { font-size: 10px; padding: 2px 5px 1px; }
	.tagline { grid-area: 3 / 1; font-size: 12px; line-height: 1.55; max-width: 46vw; }
	.quote { grid-area: 4 / 1; font-size: 12px; line-height: 1.55; margin: 0; }
	#loading, #title-buttons { grid-area: 1 / 2 / 5 / 3; }
	#title-buttons { gap: 10px; margin: 0; }
	.controls { grid-area: 5 / 1 / 6 / 3; margin: 4px 0 0; font-size: 10px; }
	.home-link { top: calc(10px + env(safe-area-inset-top, 0px)); left: 12px; font-size: 12px; }
}