/* 학생 화면 — 스마트폰 세로, 큰 터치 영역. 위 막대는 밤(가지색)이고, 마지막 날부터 아침(흰 지면)으로 바뀐다. */

.phone { max-width: 30rem; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
.phone-main { flex: 1; padding: var(--s-xl) var(--s-lg) var(--s-section); }
.phone-top {
  position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto; gap: var(--s-sm) var(--s-md); align-items: center;
  padding: var(--s-md) var(--s-lg); background: var(--aubergine); color: var(--on-aubergine);
  border-radius: 0 0 var(--r-xl) var(--r-xl); transition: background-color 1.2s, color 1.2s;
}
.who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm); min-width: 0; }
.who .chip { color: var(--ink); }
.nick { font-weight: 700; font-size: 1.0625rem; }
.top-tools { grid-column: 2; grid-row: 1; }
.stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-sm); }
.stat { background: rgba(255, 255, 255, 0.12); border-radius: var(--r-lg); padding: 0.375rem 0.625rem; display: flex; flex-direction: column; }
.stat-label { font-size: 0.75rem; font-weight: 600; color: var(--on-aubergine-mute); white-space: nowrap; }
.stat-value { font-size: 1.25rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }

body[data-stage="reveal"] .phone-top, body[data-stage="reflect"] .phone-top, body[data-stage="promise"] .phone-top, body[data-stage="end"] .phone-top {
  background: var(--canvas); color: var(--ink); box-shadow: var(--lift-1);
}
body[data-stage="reveal"] .stat, body[data-stage="reflect"] .stat, body[data-stage="promise"] .stat, body[data-stage="end"] .stat { background: var(--cream); }
body[data-stage="reveal"] .stat-label, body[data-stage="reflect"] .stat-label, body[data-stage="promise"] .stat-label, body[data-stage="end"] .stat-label { color: var(--ink-mute); }

.hero { display: flex; flex-direction: column; gap: var(--s-sm); padding: var(--s-section) 0 var(--s-xl); }
.join .hero .display { color: var(--aubergine); }
.code-input { font-size: 1.75rem; font-weight: 700; letter-spacing: 0.3em; text-align: center; text-transform: uppercase; min-height: 3.5rem; }
.card-class { border-width: 2px; text-align: center; align-items: center; }
.look-up { text-align: center; font-weight: 700; font-size: 1.125rem; padding: var(--s-lg); border-radius: var(--r-xl); background: rgba(255, 255, 255, 0.7); }
.scene { display: flex; flex-direction: column; gap: var(--s-sm); }
/* 낼 버튼은 화면 아래에 붙어 있다 (스크롤하지 않아도 보인다) */
.submit-dock { position: sticky; bottom: 0.75rem; z-index: 4; }
.submit-dock .btn { box-shadow: var(--lift-1); }
.submit-dock .btn:disabled { opacity: 1; background: #cfc3d0; color: #fff; }
.scene .illust { max-height: 22dvh; }   /* 선택지가 스크롤 없이 두 개는 보이게 */
.locked-screen .card { text-align: center; align-items: center; padding: var(--s-section) var(--s-xxl); }
.lock-emoji { font-size: 3rem; line-height: 1; }
.picked { font-weight: 700; font-size: 1.125rem; }
.result-text { font-size: 1.0625rem; }
.card-night .picked { color: var(--glow); }

html.capture .foot { visibility: hidden; }

/* 쓰고 고르는 화면의 작은 그림: 화면이 낮은 폰에서는 접는다 (입력칸과 단추가 먼저다) */
@media (max-height: 740px) { .illust-optional { display: none !important; } }

/* 2차시: 폰에서는 막대 이름을 막대 위에 */
.phone .stack-row { grid-template-columns: 1fr; gap: 0.25rem; }
.phone .count-cell .big-number { font-size: 1.5rem; }
.phone .pinned { border-radius: 0 0 var(--r-lg) var(--r-lg); }