.mafia-wrap{
  max-width:560px;
}

/* ---------- Day / night phase background (table view only) ---------- */
#stars{
  transition:background 1.8s ease;
}
body.mafia-night #stars{
  background:radial-gradient(ellipse at 50% 15%, #0a1440 0%, #050a1e 45%, #02030a 100%);
}
body.mafia-day #stars{
  background:radial-gradient(ellipse at 50% 10%, #4a2a10 0%, #2b1608 42%, #04050a 85%);
}

.entry-panel{
  margin-top:40px;
  padding:34px 30px;
  background:linear-gradient(180deg, rgba(63,242,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(63,242,255,0.18);
  border-radius:8px;
  text-align:left;
}

.field-group{
  margin-bottom:22px;
}
.field-label{
  display:block;
  font-family:'Orbitron',sans-serif;
  font-size:11px;
  letter-spacing:.25em;
  color:var(--cyan-dim);
  margin-bottom:10px;
  text-align:center;
}

.nickname-input{
  width:100%;
  padding:14px 16px;
  background:rgba(63,242,255,0.06);
  border:1px solid rgba(63,242,255,0.35);
  border-radius:2px;
  color:#fff;
  font-family:'Noto Sans KR',sans-serif;
  font-size:15px;
  outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.nickname-input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 18px rgba(63,242,255,0.4);
}

.enter-btn{
  display:block;
  width:100%;
  margin-top:10px;
  padding:16px;
}

.divider{
  margin:22px 0;
  text-align:center;
  font-family:'Orbitron',sans-serif;
  font-size:11px;
  letter-spacing:.3em;
  color:var(--cyan-dim);
}

.join-form{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.join-input{
  width:160px;
  padding:14px 16px;
  background:rgba(63,242,255,0.06);
  border:1px solid rgba(63,242,255,0.35);
  border-radius:2px;
  color:#fff;
  font-family:'Orbitron',sans-serif;
  font-size:16px;
  letter-spacing:.3em;
  text-align:center;
  text-transform:uppercase;
  outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.join-input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 18px rgba(63,242,255,0.4);
}

.back-btn{
  display:block;
  width:100%;
  margin-top:22px;
}

.dev-toggle-row{
  text-align:center;
  margin-top:26px;
}
.dev-btn{
  color:var(--warn);
  border-color:rgba(255,210,63,0.4);
}
.dev-btn:hover{
  background:var(--warn);
  color:#1a1300;
}
.dev-panel{
  margin-top:16px;
  padding:18px;
  background:rgba(255,210,63,0.06);
  border:1px solid rgba(255,210,63,0.3);
  border-radius:8px;
  text-align:center;
}
.dev-select{
  width:100%;
  margin-top:10px;
  padding:12px 14px;
  background:rgba(4,5,10,0.8);
  border:1px solid rgba(255,210,63,0.4);
  border-radius:2px;
  color:#fff;
  font-family:'Noto Sans KR',sans-serif;
  font-size:14px;
  outline:none;
}
.dev-start-btn{
  display:block;
  width:100%;
  margin-top:14px;
  background:var(--warn);
  color:#1a1300;
  border:none;
}

/* ---------- Table ---------- */
.table-panel{
  margin-top:36px;
  text-align:center;
}

/* Widen the page shell only while the table view is active, so entry/lobby
   forms stay at their normal narrow width. */
body.mafia-table-view .mafia-wrap{
  max-width:1180px;
}

.table-header{
  margin-bottom:8px;
}

.table-columns{
  display:flex;
  align-items:flex-start;
  gap:24px;
  margin-top:20px;
  text-align:left;
}
.table-col{
  min-width:0;
}
.table-col-left{
  flex:0 0 260px;
}
.table-col-center{
  flex:1 1 auto;
}
.table-col-right{
  flex:0 0 300px;
}
.table-col-left .role-card,
.table-col-right .broadcast-panel,
.table-col-right .chat-panel{
  text-align:center;
}
.table-col-right .chat-panel .chat-msg,
.table-col-right .broadcast-line{
  text-align:left;
}

.table-footer{
  margin-top:28px;
}
.test-mode-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:14px;
  font-size:12px;
  color:var(--warn);
  cursor:pointer;
}
.test-mode-row input{
  accent-color:var(--warn);
  width:15px;
  height:15px;
  cursor:pointer;
}

@media (max-width:900px){
  .table-columns{
    flex-direction:column;
  }
  .table-col-left,
  .table-col-center,
  .table-col-right{
    flex:1 1 auto;
    width:100%;
  }
}

.room-info{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.room-info-label{
  font-family:'Orbitron',sans-serif;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--cyan-dim);
}
.room-code{
  font-family:'Orbitron',sans-serif;
  font-size:22px;
  font-weight:700;
  letter-spacing:.3em;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(63,242,255,0.6);
}
.btn-small{
  padding:8px 16px;
  font-size:11px;
}

.stage-label{
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  letter-spacing:.15em;
  color:var(--cyan);
  text-shadow:0 0 10px rgba(63,242,255,0.5);
  margin-bottom:10px;
}

.phase-timer{
  font-family:'Orbitron',sans-serif;
  font-size:32px;
  font-weight:900;
  color:var(--warn);
  text-shadow:0 0 16px rgba(255,210,63,0.5);
  margin-bottom:20px;
}
.phase-timer.urgent{
  color:var(--danger);
  text-shadow:0 0 16px rgba(255,95,126,0.6);
}

.role-card{
  margin:0 auto 20px;
  max-width:360px;
  padding:20px 22px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(192,77,255,0.1), rgba(255,255,255,0.02));
  border:1px solid rgba(192,77,255,0.4);
}
.role-card.team-citizens{
  background:linear-gradient(180deg, rgba(63,242,255,0.1), rgba(255,255,255,0.02));
  border-color:rgba(63,242,255,0.4);
}
.role-card-team{
  font-family:'Orbitron',sans-serif;
  font-size:10px;
  letter-spacing:.2em;
  color:var(--cyan-dim);
  margin-bottom:8px;
}
.role-card-name{
  font-family:'Orbitron',sans-serif;
  font-size:24px;
  font-weight:900;
  color:#fff;
  margin-bottom:10px;
  text-shadow:0 0 14px rgba(192,77,255,0.5);
}
.role-card-desc{
  font-size:13px;
  line-height:1.7;
  color:#9fc4d6;
}

.stolen-ability-wrap{
  margin:0 auto 20px;
  max-width:360px;
}
.stolen-ability-label{
  font-family:'Orbitron',sans-serif;
  font-size:10px;
  letter-spacing:.2em;
  color:var(--warn);
  margin-bottom:8px;
  text-align:center;
}
.stolen-ability-card{
  margin:0;
  max-width:none;
  padding:16px 18px;
}
.stolen-ability-card .role-card-name{
  font-size:18px;
  margin-bottom:6px;
}

.action-controls{
  margin-bottom:22px;
  padding:20px;
  background:rgba(63,242,255,0.05);
  border:1px solid rgba(63,242,255,0.2);
  border-radius:8px;
  transition:opacity .15s ease;
}
.action-controls.busy{
  opacity:.5;
  pointer-events:none;
}

.target-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:14px;
}
.target-btn{
  padding:10px 16px;
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  color:var(--cyan);
  background:rgba(63,242,255,0.06);
  border:1px solid rgba(63,242,255,0.35);
  border-radius:4px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.target-btn:hover:not(:disabled){
  background:var(--cyan);
  color:#04141a;
}
.target-btn:disabled{
  color:#4a5b62;
  background:rgba(255,255,255,0.02);
  border-color:rgba(255,255,255,0.08);
  cursor:not-allowed;
}
.broadcast-panel{
  margin-bottom:22px;
  padding:14px 16px;
  background:rgba(63,242,255,0.04);
  border:1px solid rgba(63,242,255,0.2);
  border-radius:8px;
  text-align:left;
}
.broadcast-panel .field-label{
  text-align:center;
}
.broadcast-log{
  max-height:220px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:10px;
  padding:10px;
  background:rgba(0,0,0,0.3);
  border-radius:4px;
}
.broadcast-line{
  font-size:12px;
  line-height:1.6;
  color:#9fc4d6;
  padding-bottom:5px;
  border-bottom:1px dashed rgba(63,242,255,0.1);
}
.broadcast-line:last-child{
  border-bottom:none;
  padding-bottom:0;
}
.broadcast-line.event{
  color:var(--cyan);
}
.broadcast-line.personal{
  color:var(--warn);
}
.broadcast-line.tagged{
  padding:4px 8px 8px;
  background:rgba(255,210,63,0.08);
  border:1px solid rgba(255,210,63,0.25);
  border-bottom:1px solid rgba(255,210,63,0.25);
  border-radius:4px;
}
.broadcast-tag{
  display:block;
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.05em;
  color:var(--warn);
  text-shadow:0 0 8px rgba(255,210,63,0.5);
  margin-bottom:2px;
}

.verdict-spotlight{
  position:relative;
  margin:0 auto 18px;
  max-width:260px;
  padding:30px 20px 22px;
  border-radius:12px;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,95,126,0.22) 0%, rgba(255,95,126,0.05) 55%, transparent 100%);
  border:1px solid rgba(255,95,126,0.4);
  animation:spotlightIn .4s ease;
}
.verdict-spotlight-seat{
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.3em;
  color:var(--danger);
  opacity:.8;
  margin-bottom:10px;
}
.verdict-spotlight-name{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:26px;
  color:#fff;
  text-shadow:0 0 20px rgba(255,95,126,0.8);
  word-break:break-all;
}
@keyframes spotlightIn{
  from{opacity:0; transform:scale(.9) translateY(-6px);}
  to{opacity:1; transform:scale(1) translateY(0);}
}

.verdict-btn-row{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:14px;
}
.verdict-yes{
  background:var(--danger);
  border-color:var(--danger);
  color:#1a0006;
}
.verdict-no{
  color:var(--cyan);
}
.verdict-tally{
  margin:-8px 0 22px;
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--warn);
}

.time-adjust-panel{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:22px;
  transition:opacity .15s ease;
}
.time-adjust-panel.busy{
  opacity:.5;
  pointer-events:none;
}

.chat-panel{
  margin-bottom:22px;
  padding:16px;
  background:rgba(255,95,126,0.05);
  border:1px solid rgba(255,95,126,0.3);
  border-radius:8px;
  text-align:left;
}
.chat-panel .field-label{
  text-align:center;
  color:var(--danger);
}
.chat-log{
  max-height:180px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:12px 0;
  padding:10px;
  background:rgba(0,0,0,0.25);
  border-radius:4px;
}
.chat-msg{
  font-size:12px;
  line-height:1.5;
  color:#e6f7ff;
}
.chat-msg .chat-nick{
  font-family:'Orbitron',sans-serif;
  font-size:10px;
  color:var(--danger);
  margin-right:6px;
}
.chat-form{
  display:flex;
  gap:8px;
}
.chat-input{
  flex:1;
  padding:10px 12px;
  background:rgba(63,242,255,0.06);
  border:1px solid rgba(255,95,126,0.35);
  border-radius:2px;
  color:#fff;
  font-family:'Noto Sans KR',sans-serif;
  font-size:13px;
  outline:none;
}
.chat-input:focus{
  border-color:var(--danger);
  box-shadow:0 0 14px rgba(255,95,126,0.35);
}

/* Lover channel -- pink */
.lover-chat-panel{
  margin-top:22px;
  background:rgba(255,110,199,0.05);
  border-color:rgba(255,110,199,0.35);
}
.lover-chat-panel .field-label{
  color:#ff6ec7;
}
.lover-chat-panel .chat-msg .chat-nick{
  color:#ff6ec7;
}
.lover-chat-panel .chat-input{
  border-color:rgba(255,110,199,0.4);
}
.lover-chat-panel .chat-input:focus{
  border-color:#ff6ec7;
  box-shadow:0 0 14px rgba(255,110,199,0.4);
}

/* Dead channel -- muted / ghostly */
.dead-chat-panel{
  margin-top:22px;
  background:rgba(159,196,214,0.04);
  border-color:rgba(159,196,214,0.25);
}
.dead-chat-panel .field-label{
  color:#9fc4d6;
}
.dead-chat-panel .chat-msg .chat-nick{
  color:#9fc4d6;
}
.dead-chat-panel .chat-input{
  border-color:rgba(159,196,214,0.35);
}
.dead-chat-panel .chat-input:focus{
  border-color:#9fc4d6;
  box-shadow:0 0 14px rgba(159,196,214,0.3);
}

.terrorist-panel{
  background:rgba(255,95,126,0.06);
  border-color:rgba(255,95,126,0.35);
}
.terrorist-panel .field-label{
  color:var(--danger);
}

.seats-list{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  margin-bottom:10px;
}
.seat-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px 8px;
  background:rgba(63,242,255,0.04);
  border:1px solid rgba(63,242,255,0.15);
  border-radius:6px;
  text-align:center;
}
.seat-row.me{
  border-color:rgba(63,242,255,0.5);
  background:rgba(63,242,255,0.1);
}
.seat-row.dead{
  opacity:.4;
}
.seat-row.mafia-team{
  border-color:rgba(255,95,126,0.4);
}
.seat-row.lover-team{
  border-color:rgba(255,110,199,0.5);
}

.seat-info{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  width:100%;
}
.seat-nickname{
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  color:#fff;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.seat-tag{
  font-size:8px;
  letter-spacing:.1em;
  padding:2px 5px;
  border-radius:2px;
  border:1px solid rgba(63,242,255,0.4);
  color:var(--cyan);
}
.seat-tag.host{border-color:var(--warn);color:var(--warn);}
.seat-tag.dead{border-color:var(--danger);color:var(--danger);}
.seat-role{
  font-size:10px;
  color:var(--magenta);
}
.seat-votecount{
  font-size:10px;
  color:var(--warn);
}
.seat-memo-btn{
  width:100%;
  margin-top:4px;
  padding:6px 4px;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(63,242,255,0.25);
  border-radius:3px;
  color:#6f95a5;
  font-family:'Noto Sans KR',sans-serif;
  font-size:10px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.seat-memo-btn:hover{
  border-color:var(--cyan);
  color:var(--cyan);
}
.seat-memo-btn.set{
  border-color:rgba(255,210,63,0.5);
  background:rgba(255,210,63,0.08);
  color:var(--warn);
}
.seat-memo-btn.confirmed{
  cursor:default;
  font-weight:600;
}
.seat-memo-btn.confirmed-mafia{
  border-color:rgba(255,95,126,0.6);
  background:rgba(255,95,126,0.12);
  color:var(--danger);
}
.seat-memo-btn.confirmed-citizen{
  border-color:rgba(63,242,255,0.6);
  background:rgba(63,242,255,0.12);
  color:var(--cyan);
}

.seat-ready-label{
  width:100%;
  margin-top:4px;
  padding:6px 4px;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(63,242,255,0.25);
  border-radius:3px;
  color:#6f95a5;
  font-family:'Noto Sans KR',sans-serif;
  font-size:10px;
  text-align:center;
}
.seat-ready-label.ready{
  border-color:rgba(77,255,160,0.6);
  background:rgba(77,255,160,0.12);
  color:var(--success);
  font-weight:600;
}

#footerReadyBtn.ready{
  border-color:rgba(77,255,160,0.6);
  background:rgba(77,255,160,0.12);
  color:var(--success);
}

.seat-kick-btn{
  width:100%;
  margin-top:4px;
  padding:6px 4px;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,95,126,0.3);
  border-radius:3px;
  color:var(--danger);
  font-family:'Noto Sans KR',sans-serif;
  font-size:10px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.seat-kick-btn:hover{
  border-color:var(--danger);
  background:rgba(255,95,126,0.15);
}

/* ---------- Modal (memo picker) ---------- */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(2,4,10,0.85);
  backdrop-filter:blur(4px);
}
.modal-box{
  width:100%;
  max-width:380px;
  max-height:90vh;
  overflow-y:auto;
  padding:26px 22px;
  background:linear-gradient(180deg, rgba(63,242,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(63,242,255,0.25);
  border-radius:10px;
}
.memo-group-label{
  margin:16px 0 10px;
  font-family:'Orbitron',sans-serif;
  font-size:11px;
  letter-spacing:.15em;
  text-align:center;
}
.memo-group-label.mafia{color:var(--danger);}
.memo-group-label.citizen{color:var(--cyan);}
.memo-icons{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.memo-icon-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:10px 4px;
  background:rgba(63,242,255,0.05);
  border:1px solid rgba(63,242,255,0.2);
  border-radius:6px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.memo-icon-btn:hover{
  background:rgba(63,242,255,0.15);
  border-color:var(--cyan);
}
.memo-icon-emoji{
  font-size:22px;
}
.memo-icon-label{
  font-size:10px;
  color:#9fc4d6;
}

.role-guide-row{
  display:flex;
  justify-content:center;
  margin-bottom:14px;
}
.role-guide-desc{
  margin-top:16px;
  padding:14px 16px;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(63,242,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(63,242,255,0.3);
  text-align:left;
}
.role-guide-desc.team-mafia{
  background:linear-gradient(180deg, rgba(192,77,255,0.1), rgba(255,255,255,0.02));
  border-color:rgba(192,77,255,0.4);
}

/* ---------- Stage transition / result flash ---------- */
.stage-flash{
  position:fixed;
  inset:0;
  z-index:250;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  text-align:center;
  background:rgba(2,3,8,0.86);
  backdrop-filter:blur(3px);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.stage-flash.show{
  opacity:1;
  pointer-events:auto;
}
.stage-flash-inner{
  transform:scale(.82);
  transition:transform .5s cubic-bezier(.2,1.5,.4,1);
}
.stage-flash.show .stage-flash-inner{
  transform:scale(1);
}
.stage-flash-title{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:clamp(38px,10vw,68px);
  letter-spacing:.08em;
  margin-bottom:14px;
}
.stage-flash-sub{
  font-family:'Noto Sans KR',sans-serif;
  font-size:15px;
  letter-spacing:.03em;
  color:#cfe8f2;
}
.stage-flash.vote .stage-flash-title{
  color:var(--warn);
  text-shadow:0 0 26px rgba(255,210,63,0.8), 0 0 55px rgba(255,210,63,0.4);
}
.stage-flash.mafia .stage-flash-title{
  color:var(--danger);
  text-shadow:0 0 26px rgba(255,95,126,0.9), 0 0 60px rgba(255,95,126,0.5);
}
.stage-flash.citizens .stage-flash-title{
  color:var(--cyan);
  text-shadow:0 0 26px rgba(63,242,255,0.9), 0 0 60px rgba(63,242,255,0.5);
}

@media (max-width:560px){
  .seats-list{grid-template-columns:repeat(2, 1fr);}
}

.action-row{
  margin-top:24px;
}
.leave-btn{
  margin-top:20px;
}

@media (max-width:480px){
  .entry-panel{padding:26px 20px;}
}