* { box-sizing: border-box; }
:root {
  --bg:#16171c; --panel:#1e2029; --text:#e8e8ea; --muted:#9aa0ab;
  --accent:#e0883a; --line:#2a2d38;
}
html, body {
  margin:0; height:100%; background:var(--bg); color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
.view { min-height:100dvh; display:flex; flex-direction:column; align-items:center; }
.hidden { display:none !important; }

button {
  padding:14px 18px; border-radius:10px; border:1px solid var(--line);
  background:#262933; color:var(--text); font-size:16px; cursor:pointer;
}
button:active { transform:translateY(1px); }
button:disabled { opacity:.4; cursor:default; transform:none; }
button.primary { background:var(--accent); border-color:var(--accent); color:#1a1206; font-weight:700; }
button.ghost { background:transparent; }

/* 화면 1: 입장 */
#entry { justify-content:center; padding:24px; }
.entry-box {
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:28px 24px; width:100%; max-width:340px; text-align:center;
}
.entry-box h1 { margin:0 0 4px; font-size:32px; letter-spacing:3px; }
.sub { margin:0 0 22px; color:var(--muted); font-size:14px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0; }
.row span { color:var(--muted); font-size:15px; }
select {
  flex:1; padding:12px; border-radius:10px; background:#12131a; color:var(--text);
  border:1px solid var(--line); font-size:16px;
}
.entry-box .primary { width:100%; margin-top:6px; }
.msg { color:var(--accent); font-size:14px; min-height:18px; margin:12px 0 0; }

/* 화면 2: 게임 */
#game { justify-content:space-between; padding:12px; gap:10px; }
#status { font-size:18px; font-weight:600; padding:6px; text-align:center; min-height:24px; }
#status.over { color:var(--accent); font-size:22px; }
#board-wrap {
  flex:1; width:100%; display:flex; align-items:center; justify-content:center;
  padding:4px; min-height:0;
}
#board { border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.4); touch-action:manipulation; }
.actions { display:flex; gap:10px; width:100%; max-width:480px; }
.actions button { flex:1; }
#btn-play { flex:2; }