* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a1420; color: #fff;
  font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  -webkit-user-select: none; user-select: none; touch-action: none; }
[hidden] { display: none !important; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#night { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s;
  background: radial-gradient(ellipse at 50% 55%, rgba(5,5,20,0) 18%, rgba(4,4,16,.82) 55%, rgba(2,2,10,.97) 100%); }
#night.on { opacity: 1; }

button { font: inherit; color: #fff; background: #e2574c; border: 0; border-radius: 12px; padding: 10px 16px;
  font-weight: 700; cursor: pointer; }
button:hover { filter: brightness(1.1); }
button:disabled { opacity: .45; cursor: default; }
button.ghost { background: rgba(255,255,255,.14); }
button.blue { background: #4a82e8; }
input { font: inherit; color: #fff; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px; padding: 10px 12px; outline: none; -webkit-user-select: text; user-select: text; }
input:focus { border-color: #ffd27a; }

.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15,10,22,.72); backdrop-filter: blur(6px); z-index: 20; padding: 16px; }
.card { width: min(380px, 100%); background: #2a2134; border-radius: 22px; padding: 28px 24px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.card .logo { border-radius: 20px; display: block; margin: 0 auto; }
.card .sub { color: #ffd27a; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.card .fine { color: #8f859c; font-size: 11px; line-height: 1.6; margin-top: 10px; }
.card h1 { margin: 6px 0 8px; font-size: 26px; }
.card p { margin: 0 0 18px; color: #cbbfd8; font-size: 14px; line-height: 1.6; }
.card input { width: 100%; margin-bottom: 10px; text-align: center; font-size: 17px; }
.card button { width: 100%; font-size: 17px; padding: 12px; }
#enterErr { color: #ff9c8f; font-size: 13px; min-height: 18px; margin-top: 8px; }

#top { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none;
  width: min(640px, 92vw); z-index: 5; }
#phase { display: inline-flex; gap: 10px; align-items: center; background: rgba(20,14,28,.78); border-radius: 999px;
  padding: 7px 18px; font-weight: 800; font-size: 16px; }
#timer { color: #ffd27a; font-variant-numeric: tabular-nums; }
#timer.hot { color: #ff7b6e; }
#announce { margin-top: 8px; background: rgba(20,14,28,.86); border: 1px solid rgba(255,210,122,.45); border-radius: 14px;
  padding: 10px 16px; font-size: 16px; line-height: 1.5; opacity: 0; transition: opacity .4s; }
#announce.on { opacity: 1; }
#announce::before { content: "🎙 사회자  "; color: #ffd27a; font-weight: 800; }

#role { position: fixed; top: 10px; left: 10px; background: rgba(20,14,28,.78); border-radius: 12px; padding: 8px 12px;
  font-weight: 800; font-size: 14px; z-index: 5; }
#role small { display: block; font-weight: 500; color: #cbbfd8; font-size: 11px; margin-top: 2px; }
#sound { position: fixed; top: 10px; right: 10px; background: rgba(20,14,28,.78); padding: 8px 10px; z-index: 6; }

#panel { position: fixed; right: 10px; top: 58px; width: min(290px, 44vw); background: rgba(24,17,33,.86);
  border-radius: 16px; padding: 12px; font-size: 14px; line-height: 1.5; z-index: 5; max-height: calc(100vh - 80px); overflow: auto; }
#panel h3 { margin: 0 0 6px; font-size: 15px; color: #ffd27a; }
#panel p { margin: 0 0 8px; color: #e6dcef; }
#panel .btns { display: flex; gap: 6px; flex-wrap: wrap; }
#panel .btns button { flex: 1; min-width: 90px; padding: 9px 8px; font-size: 14px; }
#panel .pick { background: rgba(255,255,255,.1); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
#panel .pick b { color: #ffd27a; }
#panel ul { list-style: none; margin: 0 0 8px; padding: 0; }
#panel li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
#panel li.dead { opacity: .45; text-decoration: line-through; }
#panel .tbl { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.08); }
#panel .tbl button { padding: 6px 12px; font-size: 13px; }
#panel .tbl span small { color: #cbbfd8; }

#chat { position: fixed; left: 10px; bottom: 10px; width: min(370px, 62vw); z-index: 5; }
#log { height: min(230px, 30vh); overflow-y: auto; background: rgba(20,14,28,.62); border-radius: 14px 14px 0 0;
  padding: 8px 10px; font-size: 14px; line-height: 1.5; -webkit-user-select: text; user-select: text; touch-action: pan-y; }
#log div { margin-bottom: 2px; word-break: break-all; }
#log b { color: #ffe9b8; }
#log .sys { color: #ffd27a; }
#log .mafia, #log .mafia b { color: #ff8f84; }
#log .dead, #log .dead b { color: #a9a3b8; }
#log .priv { color: #8fd0ff; font-weight: 700; }
#log .note { color: #b9afc6; font-style: italic; }
#chatForm { display: flex; gap: 0; }
#chatIn { flex: 1; min-width: 0; border-radius: 0 0 0 14px; background: rgba(20,14,28,.86); }
#chatForm button { border-radius: 0 0 14px 0; }
#hint { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); color: rgba(255,255,255,.7);
  font-size: 12px; pointer-events: none; text-shadow: 0 1px 3px #000; }

#helpBtn { position: fixed; top: 10px; right: 54px; background: rgba(20,14,28,.78); padding: 8px 10px; z-index: 6; }
#help { position: fixed; inset: 0; background: rgba(8,5,14,.6); display: flex; align-items: center; justify-content: center; z-index: 16; padding: 16px; }
#help .box { width: min(460px, 100%); max-height: 86vh; overflow: auto; background: #2a2134; border-radius: 20px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.55); touch-action: pan-y; }
#help h2 { margin: 0 0 10px; text-align: center; }
#help .rules p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: #e6dcef; }
#help .rules b { color: #ffd27a; margin-right: 4px; }
#help .row { display: flex; justify-content: center; }
#modal { position: fixed; inset: 0; background: rgba(8,5,14,.6); display: flex; align-items: center; justify-content: center;
  z-index: 15; padding: 16px; }
#modal .box { width: min(460px, 100%); background: #2a2134; border-radius: 20px; padding: 20px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.55); }
#modal h2 { margin: 0 0 4px; font-size: 20px; }
#modal p { margin: 0 0 14px; color: #cbbfd8; font-size: 14px; }
#modalGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
#modalGrid button { background: rgba(255,255,255,.1); padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#modalGrid button i { width: 34px; height: 34px; border-radius: 50%; display: block; border: 3px solid rgba(255,255,255,.5); }
#modalGrid button.sel, #modal button.sel, button.chosen { background: #ffd27a !important; color: #2a2134; box-shadow: 0 0 0 3px #fff; opacity: 1 !important; }
button.dim { opacity: .4; }
#modalGrid button.sel small { color: #6b4a1a; }
#modalGrid button small { font-weight: 500; color: #ffd9d4; }
#modal .row { display: flex; gap: 8px; justify-content: center; }

#roleCard { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 12;
  pointer-events: none; }
#roleCard .inner { background: #2a2134; border: 3px solid #ffd27a; border-radius: 22px; padding: 26px 34px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: pop .5s; max-width: 86vw; }
#roleCard .emoji { font-size: 64px; }
#roleCard .title { font-size: 28px; font-weight: 900; margin: 4px 0; }
#roleCard .desc { color: #cbbfd8; font-size: 15px; line-height: 1.5; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#panel .mini { float: right; background: rgba(255,255,255,.12); padding: 3px 9px; font-size: 12px; font-weight: 600; border-radius: 8px; margin: -2px 0 4px 8px; }
#panel.min { padding: 6px; }
#panel.min .btns button { padding: 7px 10px; font-size: 13px; }

@media (max-width: 640px) {
  /* 휴대폰: 안내 창은 대화창 바로 위에, 화면 위쪽은 게임 장면이 보이게 비운다 */
  #chat { left: 8px; right: 8px; width: auto; bottom: max(8px, env(safe-area-inset-bottom)); }
  #log { height: 16vh; font-size: 13px; }
  #panel { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(16vh + 58px + env(safe-area-inset-bottom)); max-height: 34vh; font-size: 13px; }
  #panel.min { left: auto; }
  #top { top: max(8px, env(safe-area-inset-top)); }
  #phase { font-size: 14px; padding: 6px 14px; }
  #announce { font-size: 14px; padding: 8px 12px; }
  #role { top: max(8px, env(safe-area-inset-top)); left: 8px; font-size: 12px; padding: 6px 9px; max-width: 28vw; }
  #sound { top: max(8px, env(safe-area-inset-top)); }
  #helpBtn { top: max(8px, env(safe-area-inset-top)); }
  #hint { display: none; }
  #modalGrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}