/* 사용자 폰 화면 */
html, body { height: 100%; }
body { font-size: 16px; }
#app { min-height: 100dvh; display: flex; flex-direction: column; }

/* 로그인 */
.login { padding: 20px 16px 40px; max-width: 560px; margin: 0 auto; width: 100%; }
.login h1 { font-size: 1.5rem; font-weight: 900; margin: .4em 0 .1em; }
.login p  { color: var(--fg-dim); margin: 0 0 1.2em; font-weight: 600; }
.facegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; }
@media (min-width: 420px) { .facegrid { grid-template-columns: repeat(5, 1fr); } }
.facegrid .av { --size: 62px; cursor: pointer; transition: transform .15s var(--ease-pop); }
.facegrid .av:active { transform: scale(.9); }
.facegrid .av.taken { opacity: .3; pointer-events: none; }
.facegrid .av.taken .av__ring::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.6rem; color: var(--ok); background: rgba(0,0,0,.45); border-radius: 50%; }
.confirm { position: fixed; inset: 0; background: rgba(10,12,17,.94); z-index: 100; display: grid; place-items: center; padding: 24px; }
.confirm .box { width: 100%; max-width: 340px; text-align: center; }
.confirm .av { --size: 120px; margin-bottom: 1rem; }
.confirm input { width: 100%; padding: 1em; font-size: 1.3rem; text-align: center; font-weight: 800;
  background: var(--bg-3); border: 2px solid var(--line); border-radius: var(--r); margin: 1rem 0; }
.confirm input:focus { outline: none; border-color: var(--accent); }

/* 플레이 셸 */
.phead {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: color-mix(in srgb, var(--team) 12%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--team) 35%, var(--line));
  backdrop-filter: blur(8px);
}
.phead .av { --size: 38px; }
.phead__name { font-weight: 900; font-size: .98rem; line-height: 1.15; }
.phead__team { font-size: .72rem; color: var(--team); font-weight: 800; }
.phead__spacer { flex: 1; }
.phead__score { text-align: right; }
.phead__score b { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; display: block; line-height: 1; }
.phead__score span { font-size: .68rem; color: var(--fg-dim); font-weight: 700; }
.phead__timer { font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--accent); }

#pstage { flex: 1; padding: 14px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

.sheet { position: fixed; inset: 0; z-index: 200; background: rgba(8,10,14,.8); display: flex; align-items: flex-end; }
.sheet__inner { background: var(--bg-2); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 18px;
  width: 100%; max-height: 86dvh; overflow: auto; animation: sheetUp .28s var(--ease-pop) both;
  padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
@keyframes sheetUp { from { transform: translateY(100%) } to { transform: none } }

/* 게임 공통 */
.big-msg { text-align: center; padding: 12vh 1rem; }
.big-msg .emoji { font-size: 4rem; display: block; margin-bottom: .3em; animation: bob 2s ease-in-out infinite; }
.big-msg h2 { font-size: 1.4rem; font-weight: 900; margin: .2em 0; }
.big-msg p { color: var(--fg-dim); font-weight: 600; }
.gamelist { display: grid; gap: 10px; }
.gamelist .row { gap: 10px; padding: .9em 1em; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); }
.gamelist .row.locked { opacity: .45; }
.gamelist .row .t { flex: 1; font-weight: 800; }

.full-team { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: var(--team); color: #0F1117; animation: avPop .5s var(--ease-pop) both; }
.full-team div { font-size: 3rem; font-weight: 900; text-align: center; }