* { box-sizing: border-box; }

body {
  font-family: 'Pretendard','Noto Sans KR',sans-serif;
  margin: 0; padding: 0;
  background: #2f3d4a;
  height: 100vh;
  display: flex; justify-content: center; align-items: center;
  color: #222;
}

.wrap { width:100%; height:100%; display:flex; flex-direction:column; }
.screen { display:none; height:100%; }
.active { display:flex; flex-direction:column; height:100%; }

.card {
  background:#fff; padding:1rem; border-radius:12px;
  margin:0.8rem 1rem; box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

#nickname-screen .card:hover,
#player-area.card:hover {
  transform:none; box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

input,button,select {
  border-radius:6px; border:1px solid #cfd8dc;
  font-size:1rem; font-family:inherit;
}

button {
  border:none; border-radius:8px;
  font-size:1rem; cursor:pointer; font-weight:600;
  transition:background 0.25s, transform 0.15s;
  background:#90CAF9; color:#000;
}
button:hover { background:#64B5F6; transform:translateY(-1px); }

.btn-yellow { background:#FFE082; }
.btn-yellow:hover { background:#FFD54F; }
.btn-yellow:disabled { background:#E0E0E0; color:#888; cursor:not-allowed; opacity:0.7; }

.btn-red { background:#EF9A9A; color:#fff; }
.btn-red:hover { background:#E57373; }

.btn-dark { background:#757575; color:#fff; }
.btn-dark:hover { background:#616161; }

#nickname-screen.active { display:flex; justify-content:center; align-items:center; }
.card-login {
  width:480px; height:auto;
  display:flex; flex-direction:column; gap:0.3rem; padding:1.2rem;
  border-radius:12px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.form-row { display:flex; align-items:center; justify-content:center; margin:0.3rem 0; }
.form-row label {
  margin-right:0.8rem; font-weight:700; font-size:1.1rem;
  white-space:nowrap; width:70px; text-align:center;
}
.form-row input {
  width:90%; max-width:320px; font-size:1rem; padding:0.6rem 0.78rem;
  margin-right:1rem;
}
.card-login button { width:100%; font-size:1rem; padding:0.6rem 0.84rem; margin-top:0.4rem; }
#enter-btn { font-size:1.2rem; padding:0.84rem 1.2rem; margin-top:0.5rem; }
.title {
  font-family: 'CookieRun', 'Jua', sans-serif; font-size:2.4rem; font-weight:800;
  margin:0 0 0.4rem 0; text-align:center; color:#000;
}

/* ===== 상태바 ===== */
#game-screen .status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.8rem 1rem;
  padding: 0.8rem 1.2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  gap: 0.6rem;
  font-weight: 600;
  min-height: 72px;
}
#game-screen .quiz-title {
  flex:1; font-weight:800; color:#111;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:left; font-size:clamp(0.8rem,2vw,1.6rem);
}
#game-screen #set-ui,
#game-screen #host-controls {
  display:flex; align-items:center; gap:0.4rem; flex-shrink:0;
}
#game-screen #stop-game-btn { margin-right: 0.0rem; }
#game-screen #force-skip-btn { margin-left: 0.3rem; }
#game-screen #set-search,
#game-screen #set-select {
  font-size:1rem; padding:0.8rem 1rem;
  border-radius:8px; border:1px solid #cfd8dc; min-width:160px;
}
#game-screen .status-bar button {
  font-size:1.05rem; padding:0.8rem 1.2rem; border-radius:8px; min-width:90px;
}
#game-screen .divider {
  display:inline-block; width:2px; height:1.7rem;
  background:rgba(0,0,0,0.2); margin:0 0.2rem; vertical-align:middle;
}

/* ===== 플레이어 영역 ===== */
#game-screen #player { width:0; height:0; overflow:hidden; }
#game-screen #player-area {
  margin:0 1rem; text-align:center; min-height:200px;
  padding:1.2rem; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0.6rem;
}

/* ===== 점수판 ===== */
#game-screen .scoreboard {
  overflow-y:auto; display:flex; flex-direction:column;
  background:#fff; border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08); padding:0.6rem;
}
#game-screen .scoreboard table { width:100%; border-collapse:collapse; text-align:center; }
#game-screen .scoreboard th, #game-screen .scoreboard td {
  padding:0.4rem; border-bottom:1px solid #eee;
  font-size:1rem; font-weight:600;
}
#game-screen .scoreboard tr:first-child td { background:#FFF59D; font-weight:bold; }
#game-screen .scoreboard .me { background:#BBDEFB33; }

/* ===== 채팅 ===== */
#game-screen .chat-area {
  display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08); overflow:hidden;
}
#game-screen .chat-box { flex:1; overflow-y:auto; padding:1rem; line-height:1.6; font-size:1.05rem; }
#game-screen .chat-box .system { color:#777; font-style:italic; }
#game-screen .chat-box .me { color:#1565C0; font-weight:600; }
#game-screen .chat-input {
  display:flex; gap:0.6rem; padding:0.8rem; border-top:1px solid #ddd; align-items:center;
}
#game-screen .chat-input input {
  flex:1; font-size:1.05rem; padding:0.8rem 1rem; border-radius:8px;
}
#game-screen .chat-input button { font-size:1.05rem; padding:0.8rem 1.2rem; border-radius:8px; min-width:90px; }

/* ===== 기타 ===== */
#game-screen .hints { display:flex; flex-direction:column; gap:0.3rem; min-height:60px; }
#game-screen #line1 { font-size:1rem; font-weight:600; color:#111; }
#game-screen #line2 { font-size:1.3rem; font-weight:700; color:#111; }
#game-screen #line3 { font-size:1.2rem; font-weight:700; color:#111; }
#game-screen #time-remaining { font-size:1.2rem; font-weight:700; color:#222; margin-top:0.5rem; }
#game-screen #volume-control { width:100px; margin-top:0.5rem; background:#CFD8DC; accent-color:#2f3d4a; border-radius:6px; }
#game-screen #start-icon {
  width:80px; height:80px; border-radius:50%; background:#3F51B5;
  display:flex; justify-content:center; align-items:center;
  font-size:40px; color:white; cursor:pointer; transition:.2s;
}
#game-screen #start-icon:hover { background:#5C6BC0; }