:root {
  --bg-url: url("https://images.unsplash.com/photo-1491553895911-0055eca6402d?q=80&w=1600&auto=format&fit=crop");
  --overlay: linear-gradient(120deg, rgba(0,0,0,.35), rgba(0,0,0,.2));
  --bg-color: #fff;
  --text-color: #1f2a44;
}

/* 다크 모드용 변수 */
body.dark {
  --bg-color: #1f2a44;
  --text-color: #ecf0f1;
}

* { box-sizing: border-box; margin:0; padding:0; }
body {
  font-family: "Segoe UI", sans-serif;
  min-height: 100vh;
  display: flex; justify-content: center; align-items: center;
  background: var(--bg-color);
  color: var(--text-color);
  position: relative;
}

/* 배경 이미지 */
body::before {
  content: "";
  position: fixed; inset:0;
  background-image: var(--overlay), var(--bg-url);
  background-size: cover; background-position: center;
  filter: blur(4px);
  transform: scale(1.03);
  z-index:-2;
}

/* 툴바 */
.toolbar {
  position: fixed; top:12px; right:12px;
  display:flex; gap:6px;
  background: rgba(255,255,255,.85);
  padding:6px 10px; border-radius:10px;
  z-index:10;
}

/* 메인 카드 */
.container {
  width:min(92vw,460px);
  background: rgba(255,255,255,.92);
  padding:24px; border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.2);
  text-align:center;
}
h1 { margin-bottom:16px; }

/* 패널 */
.panel { margin-bottom:16px; }
#timeBar {
  height:10px;
  background:#2ecc71;
  border-radius:5px;
  margin-top:6px;
  transition:width 1s linear;
}

/* 입력 */
.input-row { display:flex; gap:10px; margin-bottom:16px; }
#wordInput {
  flex:1; padding:12px; border:2px solid #4aa3ff; border-radius:10px;
  transition:.3s;
}
#wordInput.success { border-color:#2ecc71; box-shadow:0 0 6px #2ecc71; }
#wordInput.error { border-color:#e74c3c; box-shadow:0 0 6px #e74c3c; }

#submitBtn { padding:12px; background:#3498db; border:none; border-radius:10px; color:#fff; cursor:pointer; }

/* 플레이어 목록 */
.board li { padding:6px 10px; margin:4px 0; border-radius:10px; display:flex; align-items:center; gap:8px; }
.board li.out { text-decoration: line-through; color:#aaa; }
.board li.bold { outline:2px solid #000; }
.board li .avatar {
  width:20px; height:20px; border-radius:50%;
}

/* 팝업 */
.popup { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; justify-content:center; align-items:center; }
.popup.hidden { display:none; }
.popup-content { background:#fff; padding:24px; border-radius:16px; text-align:center; }