/* 오늘의 퍼즐 — 데일리 챌린지 허브 (앰버 + 바이올렛 테마) */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; overscroll-behavior: none; }

body {
	font-family: 'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
	background: radial-gradient(120% 90% at 50% 0%, #4a3560 0%, #33244a 55%, #1c1330 100%);
	color: #f2ecf8;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	overflow-y: auto;
}

#app { max-width: 1100px; margin: 0 auto; padding: 10px 12px 20px; }

/* ----- 상단 바 ----- */
#topbar {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(245, 158, 11, .3);
	border-radius: 12px;
	padding: 10px 14px;
	margin-bottom: 10px;
}
#day-label { font-size: 17px; font-weight: 800; color: #ffffff; }
#diff-label { flex: 1; text-align: center; font-size: 15px; color: #f59e0b; letter-spacing: 2px; }
#total-label {
	font-size: 16px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #ffd166;
}

/* ----- 진행 칩 5개 ----- */
/* 퍼즐 수가 구성에 따라 달라지므로(5종·6종) 칸을 고정하지 않고 균등 분배한다 */
#steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}
.step {
	flex: 1 1 84px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 9px 4px;
	border-radius: 11px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .05);
	font-size: 12px;
	color: #b9a8d0;
	white-space: nowrap;
}
.step .ic { font-size: 20px; }
.step .tm { font-weight: 800; font-variant-numeric: tabular-nums; }
.step.now {
	border-color: #f59e0b;
	background: rgba(245, 158, 11, .16);
	color: #ffe6b3;
	box-shadow: 0 0 12px rgba(245, 158, 11, .25);
}
.step.done {
	border-color: rgba(63, 191, 108, .6);
	background: rgba(63, 191, 108, .14);
	color: #b9f0cb;
}
.step.done .tm { color: #7ee081; }

/* ----- 본문 ----- */
#main { display: flex; gap: 16px; align-items: flex-start; justify-content: center; }
#game-col { flex: 1 1 auto; min-width: 0; }
#stage { width: 100%; }
#game-frame {
	display: block;
	width: 100%;
	/* 게임 안의 도구 줄(되돌리기 등)까지 들어가는 높이.
	 * 상한을 크게 잡아 전체화면에서 안쪽 게임도 화면만큼 커지게 한다. */
	height: clamp(540px, 72vh, 1100px);
	border: 0;
	border-radius: 14px;
	background: #241a3a;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
}
/* ----- 넓은 화면: 안쪽 퍼즐을 "그 게임을 따로 열었을 때"와 같은 크기로 -----
 * 옛 배치는 iframe 높이를 고정 비율(clamp)로 줘서 판이 단독 실행보다 훨씬 작았다
 * (측정: 다리잇기 daily 467px vs 단독 723px). 화면 높이를 남김없이 iframe 에
 * 넘기면 안쪽 게임의 layout() 이 단독 실행과 같은 계산을 하게 된다.
 * 좁은 화면(≤760px)은 아래 미디어쿼리에서 세로로 쌓으므로 이 규칙을 적용하지 않는다. */
@media (min-width: 761px) {
	html, body { height: 100%; overflow: hidden; }
	#app {
		max-width: 1600px;
		height: 100dvh;
		display: flex;
		flex-direction: column;
		padding-bottom: 10px;
	}
	/* align-items 를 stretch 로 되돌려야 게임 열이 세로로 늘어난다
	 * (기본 규칙의 flex-start 를 그대로 두면 iframe 이 납작해진다) */
	#main { flex: 1 1 auto; min-height: 0; align-items: stretch; }
	#game-col { display: flex; flex-direction: column; min-height: 0; }
	#stage { flex: 1 1 auto; min-height: 0; }
	#game-frame { height: 100%; }
	#rank-col { max-height: 100%; overflow-y: auto; }

	/* 오늘의 퍼즐 자체 UI 는 최대한 납작하게 — 그만큼 안쪽 게임이 커진다.
	 * 단계 줄은 아이콘·시간을 한 줄로 눕히고, 게임설명 버튼은 도구 줄 오른쪽에 겹친다. */
	#steps { gap: 6px; margin-bottom: 6px; }
	.step { flex-direction: row; gap: 6px; padding: 5px 8px; }
	.step .ic { font-size: 15px; }
	#tools { margin-top: 6px; }
	#game-col { position: relative; }
}

#tools { display: flex; gap: 8px; margin-top: 10px; justify-content: center; }
#tools button {
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .08);
	color: #ffe6b3;
	border-radius: 9px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}
#tools button:active { background: rgba(255, 255, 255, .16); }

/* ----- 순위 ----- */
#rank-col {
	flex: 0 0 280px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(245, 158, 11, .2);
	border-radius: 12px;
	padding: 12px;
}
#rank-col h3 { font-size: 16px; color: #fff; text-align: center; margin-bottom: 8px; }
#rank-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
#rank-tabs button {
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	color: #cfc0e4;
	border-radius: 8px;
	padding: 7px 0;
	font-size: 12.5px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}
#rank-tabs button.on {
	background: linear-gradient(180deg, #ffd98a, #f59e0b);
	border-color: #f59e0b;
	color: #2a1c06;
}
#rank-scroll {
	max-height: 520px;
	overflow-y: auto;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
	background: rgba(0, 0, 0, .22);
}
#rank-col table { width: 100%; border-collapse: collapse; font-size: 13px; color: #ead9ff; }
#rank-col th {
	position: sticky; top: 0;
	background: #4a3560;
	color: #f5c36b;
	font-size: 12px;
	padding: 6px 4px;
}
#rank-col td {
	padding: 6px 4px;
	border-top: 1px solid rgba(255, 255, 255, .07);
	text-align: center;
	white-space: nowrap;
}
#rank-col td.rank-nm { max-width: 100px; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
#rank-col td.rank-tm { font-weight: 800; color: #ffd166; font-variant-numeric: tabular-nums; }
#rank-col tr.rank-me td { background: rgba(255, 209, 102, .16); }
#rank-col tr.rank-empty td { color: #b9a8d0; padding: 16px 4px; }

/* 게임별 구간 기록 — 순위 행 아래에 붙는 작은 칩 다섯 개 */
#rank-col tr.rank-parts td {
	border-top: none;
	padding: 0 4px 7px;
	white-space: normal;
	text-align: center;
}
#rank-col .part {
	display: inline-block;
	margin: 2px 2px 0;
	padding: 2px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .12);
	font-size: 11px;
	font-weight: 700;
	color: #e7dcf7;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ----- 오버레이 ----- */
#start-overlay, #done-overlay {
	position: fixed; inset: 0;
	background: rgba(12, 8, 20, .82);
	display: flex; justify-content: center; align-items: center;
	z-index: 10; padding: 16px;
}
.panel {
	background: linear-gradient(180deg, #45325e, #2b1e42);
	border: 1px solid rgba(245, 158, 11, .35);
	border-radius: 16px;
	box-shadow: 0 16px 44px rgba(0, 0, 0, .65);
	padding: 22px 24px;
	text-align: center;
	width: min(460px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}
.panel h2 { color: #fff; font-size: 24px; margin-bottom: 10px; }
.panel .sub { font-size: 14px; color: #cfc0e4; margin-bottom: 14px; line-height: 1.7; }
.panel .sub strong { color: #ffd166; }
#btn-start {
	border: none; border-radius: 10px;
	padding: 12px 34px;
	font-size: 16px; font-weight: 800; font-family: inherit;
	color: #2a1c06; cursor: pointer;
	background: linear-gradient(180deg, #ffd98a, #f59e0b);
}

/* 완주 목록 */
#done-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.done-row {
	display: flex; align-items: center; gap: 10px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 10px;
	padding: 8px 12px;
	font-size: 14px;
}
.done-row .nm { flex: 1; text-align: left; color: #e8dcf5; }
.done-row .tm { font-weight: 800; color: #7ee081; font-variant-numeric: tabular-nums; }
#done-overlay .final { font-size: 17px; color: #cfc0e4; margin-bottom: 12px; }
#done-overlay .final strong { font-size: 26px; color: #ffd166; }

#rank-form { display: flex; gap: 8px; justify-content: center; margin-bottom: 6px; }
#rank-name {
	flex: 1 1 auto; min-width: 0;
	padding: 9px 12px; font-size: 15px; font-family: inherit;
	color: #f2ecf8; background: rgba(0, 0, 0, .3);
	border: 2px solid rgba(255, 255, 255, .18); border-radius: 10px; outline: none;
}
#rank-name::placeholder { color: #b9a8d0; }
#rank-name:focus { border-color: #f59e0b; }
#btn-rank-submit {
	flex: 0 0 auto; border: none; border-radius: 10px;
	padding: 9px 16px; font-size: 15px; font-weight: 800; font-family: inherit;
	color: #10240f; cursor: pointer;
	background: linear-gradient(180deg, #9be47f, #4faa3c);
}
#btn-rank-submit:disabled, #rank-name:disabled { opacity: .55; cursor: default; }
#rank-status { font-size: 13px; font-weight: 700; color: #9be47f; margin-bottom: 4px; }
#rank-status.error { color: #ff8a97; }


/* 힌트 버튼 — 오래 못 풀었을 때만 나타난다 */
#btn-hint {
	border-color: rgba(255, 209, 102, .6);
	background: linear-gradient(180deg, rgba(255, 217, 138, .28), rgba(240, 163, 38, .22));
	color: #ffe6b3;
}
/* 힌트를 쓴 기록 — 순위표·합계에 주황색으로 표시 */
#rank-col td.rank-tm.hinted, #total-label.hinted, #done-total.hinted {
	color: #ffa53d;
}

/* 완주 후 퍼즐 자리를 대신하는 안내 패널 */
#done-note {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 320px;
	padding: 28px 20px;
	text-align: center;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 209, 102, .22);
	border-radius: 14px;
}
#done-note .ic { font-size: 46px; line-height: 1; }
#done-note h3 { font-size: 19px; color: #fff; margin: 0; }
#done-note p { font-size: 13.5px; line-height: 1.65; color: #b9a8d0; margin: 0; }
#done-note button {
	margin-top: 6px;
	border: none;
	border-radius: 10px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 800;
	font-family: inherit;
	color: #2a1c06;
	cursor: pointer;
	background: linear-gradient(180deg, #ffd98a, #f0a326);
}

.once-note {
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1.6;
	color: #b9a8d0;
}
.once-note strong { color: #ffd166; }

.clear-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.clear-actions button {
	border: none; border-radius: 10px;
	padding: 10px 16px; font-size: 14px; font-weight: 800; font-family: inherit;
	color: #2a1c06; cursor: pointer;
}
#btn-close-done { background: linear-gradient(180deg, #ffd98a, #f59e0b); }
#btn-retry-day { background: linear-gradient(180deg, #c9b4dd, #967fae); }

/* ----- 모바일 ----- */
@media (max-width: 760px) {
	#main { flex-direction: column; align-items: stretch; }
	#rank-col { flex: none; width: 100%; }
	#rank-scroll { max-height: 280px; }
	#game-frame { height: clamp(540px, 84vh, 820px); }
	.step { font-size: 11px; }
	.step .ic { font-size: 17px; }

	/* 휴대폰에서는 게임 화면을 맨 위로 —
	 * 게임 → (다시도전·힌트·게임설명) → 날짜·난이도·합계 → 퍼즐 목록 → 순위 순.
	 * #main 을 display:contents 로 풀어 자식들을 #app 의 형제로 만들고 order 로 배치한다. */
	#app { display: flex; flex-direction: column; }
	#main { display: contents; }
	#game-col { order: 1; }
	#topbar { order: 2; margin-top: 10px; }
	#steps { order: 3; }
	#rank-col { order: 4; margin-top: 12px; }
}

/* ----- 허브 미리보기(?demo=1) — 프로모 카드만 보여준다 ----- */
body.demo #main, body.demo #tools, body.demo #topbar, body.demo #steps { display: none; }
body.demo #start-overlay, body.demo #done-overlay { display: none; }
#promo { display: none; }
body.demo #promo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 28px 16px 34px;
	text-align: center;
}
#promo .big { font-size: 52px; }
#promo h2 { font-size: 22px; color: #fff; }
#promo .icons { font-size: 30px; letter-spacing: 6px; }
#promo p { font-size: 13.5px; color: #cfc0e4; line-height: 1.7; }
#promo p strong { color: #ffd166; }