.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:13px;
  letter-spacing:.2em;
  color:var(--cyan-dim);
  margin-bottom:12px;
  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. Most play happens on a PC
   monitor, so this is sized for that first -- the 1100px breakpoint below
   is what narrower/tablet screens fall back to. */
body.mafia-table-view .mafia-wrap{
  max-width:1440px;
}

/* The site nav and the "SOCIAL DEDUCTION PROTOCOL / 마피아" hero header are
   only useful before you've actually joined a table -- once you're seated,
   they just eat vertical space above the HUD that matters (timer, log,
   action buttons). Hide them for the whole table view, from the waiting
   room through the end screen. */
body.mafia-table-view nav,
body.mafia-table-view .page-tag,
body.mafia-table-view .page-title,
body.mafia-table-view .page-desc{
  display:none;
}
body.mafia-table-view .table-panel{
  margin-top:28px;
}

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

.table-columns{
  display:flex;
  align-items:flex-start;
  gap:32px;
  margin-top:24px;
  text-align:left;
}
.table-col{
  min-width:0;
}
.table-col-left{
  flex:0 0 320px;
}
.table-col-center{
  flex:1 1 auto;
}
.table-col-right{
  flex:0 0 380px;
}
.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:32px;
}
.test-mode-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:14px;
  font-size:13px;
  color:var(--warn);
  cursor:pointer;
}
.test-mode-row input{
  accent-color:var(--warn);
  width:16px;
  height:16px;
  cursor:pointer;
}

@media (max-width:1100px){
  .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:16px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.room-info-label{
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  letter-spacing:.2em;
  color:var(--cyan-dim);
}
.room-code{
  font-family:'Orbitron',sans-serif;
  font-size:26px;
  font-weight:700;
  letter-spacing:.3em;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(63,242,255,0.6);
}
.btn-small{
  padding:10px 18px;
  font-size:12px;
}

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

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

.role-card{
  margin:0 auto 22px;
  max-width:420px;
  padding:26px 28px;
  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:11px;
  letter-spacing:.2em;
  /* Mafia by default (matches the card's own purple border/background
     below) -- .team-citizens overrides both to cyan so a citizen-team
     role's card doesn't show a mismatched "MAFIA TEAM"-colored label. */
  color:var(--magenta);
  margin-bottom:10px;
}
.role-card.team-citizens .role-card-team{
  color:var(--cyan-dim);
}
.role-card-name{
  font-family:'Orbitron',sans-serif;
  font-size:30px;
  font-weight:900;
  color:#fff;
  margin-bottom:12px;
  text-shadow:0 0 14px rgba(192,77,255,0.5);
}
.role-card.team-citizens .role-card-name{
  text-shadow:0 0 14px rgba(63,242,255,0.5);
}
.role-once-badge{
  display:inline-block;
  margin:-4px 0 12px;
  padding:3px 10px;
  font-family:'Orbitron',sans-serif;
  font-size:10px;
  letter-spacing:.15em;
  color:var(--warn);
  border:1px solid rgba(255,210,63,0.5);
  background:rgba(255,210,63,0.08);
  border-radius:20px;
}
.role-card-desc{
  font-size:15px;
  line-height:1.8;
  color:#9fc4d6;
  /* Multi-ability descriptions (e.g. "[유혹] ...\n\n[접대] ...") use a blank
     line between named abilities -- keep that break instead of collapsing
     it away like normal text-flow whitespace. */
  white-space:pre-line;
}

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

.action-controls{
  margin-bottom:24px;
  padding:26px;
  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:10px;
  justify-content:center;
  margin-top:16px;
}
.target-btn{
  padding:14px 22px;
  font-family:'Orbitron',sans-serif;
  font-size:14px;
  color:var(--cyan);
  background:rgba(63,242,255,0.06);
  border:1px solid rgba(63,242,255,0.35);
  border-radius:5px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .12s ease;
}
.target-btn:hover:not(:disabled){
  background:var(--cyan);
  color:#04141a;
  transform:translateY(-1px);
}
.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:24px;
  padding:18px 20px;
  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:420px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:12px;
  padding:12px;
  background:rgba(0,0,0,0.3);
  border-radius:4px;
}
.broadcast-line{
  font-size:13.5px;
  line-height:1.7;
  color:#9fc4d6;
  padding-bottom:7px;
  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:6px 10px 10px;
  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:12px;
  letter-spacing:.05em;
  color:var(--warn);
  text-shadow:0 0 8px rgba(255,210,63,0.5);
  margin-bottom:3px;
}

.verdict-spotlight{
  position:relative;
  margin:0 auto 20px;
  max-width:320px;
  padding:36px 26px 28px;
  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:12px;
  letter-spacing:.3em;
  color:var(--danger);
  opacity:.8;
  margin-bottom:12px;
}
.verdict-spotlight-name{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:32px;
  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:16px;
  margin-top:16px;
}
.verdict-btn-row .btn{
  padding:17px 36px;
  font-size:13px;
}
.verdict-yes{
  background:var(--danger);
  border-color:var(--danger);
  color:#1a0006;
}
.verdict-no{
  color:var(--cyan);
}
.verdict-tally{
  margin:-10px 0 24px;
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  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:24px;
  padding:20px;
  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:260px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:14px 0;
  padding:12px;
  background:rgba(0,0,0,0.25);
  border-radius:4px;
}
.chat-msg{
  font-size:13.5px;
  line-height:1.6;
  color:#e6f7ff;
}
.chat-msg .chat-nick{
  font-family:'Orbitron',sans-serif;
  font-size:11px;
  color:var(--danger);
  margin-right:7px;
}
.chat-form{
  display:flex;
  gap:10px;
}
.chat-input{
  flex:1;
  padding:13px 14px;
  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:14px;
  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:14px;
  margin-bottom:14px;
}
.seat-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:16px 10px;
  background:rgba(63,242,255,0.04);
  border:1px solid rgba(63,242,255,0.15);
  border-radius:7px;
  text-align:center;
  transition:border-color .2s ease, background .2s ease;
}
.seat-row.me{
  border-color:rgba(63,242,255,0.5);
  background:rgba(63,242,255,0.1);
}
.seat-row.dead{
  opacity:.45;
}
.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:5px;
  width:100%;
}
.seat-nickname{
  font-family:'Orbitron',sans-serif;
  font-size:14px;
  color:#fff;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.seat-tag{
  font-size:9px;
  letter-spacing:.1em;
  padding:3px 6px;
  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:11.5px;
  color:var(--magenta);
}
.seat-votecount{
  font-size:11.5px;
  color:var(--warn);
}
.seat-memo-btn{
  width:100%;
  margin-top:6px;
  padding:8px 5px;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(63,242,255,0.25);
  border-radius:4px;
  color:#6f95a5;
  font-family:'Noto Sans KR',sans-serif;
  font-size:11.5px;
  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:6px;
  padding:8px 5px;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(63,242,255,0.25);
  border-radius:4px;
  color:#6f95a5;
  font-family:'Noto Sans KR',sans-serif;
  font-size:11.5px;
  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:6px;
  padding:8px 5px;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,95,126,0.3);
  border-radius:4px;
  color:var(--danger);
  font-family:'Noto Sans KR',sans-serif;
  font-size:11.5px;
  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:480px;
  max-height:90vh;
  overflow-y:auto;
  padding:32px 28px;
  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:18px 0 12px;
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  letter-spacing:.15em;
  text-align:center;
}
.memo-group-label.mafia{color:var(--danger);}
.memo-group-label.citizen{color:var(--cyan);}
.memo-subgroup-label{
  margin:2px 0 8px;
  font-size:11px;
  letter-spacing:.1em;
  text-align:center;
  color:#6f95a5;
}
.memo-icons{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.memo-icon-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:13px 5px;
  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:26px;
}
.memo-icon-label{
  font-size:11px;
  color:#9fc4d6;
}

.role-guide-row{
  display:flex;
  justify-content:center;
  margin-bottom:14px;
}
.role-guide-desc{
  margin-top:18px;
  padding:16px 18px;
  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 .role-card-desc{
  font-size:14px;
}
.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);}
}

/* ---------- Role reveal (once per new game) ---------- */
.role-reveal-overlay{
  position:fixed;
  inset:0;
  z-index:260;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  text-align:center;
  background:rgba(2,3,8,0.92);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease;
  /* A bigger image can outgrow a short browser window -- scroll instead of
     silently clipping the role name off the bottom of the screen. */
  overflow-y:auto;
}
.role-reveal-overlay.show{
  opacity:1;
  pointer-events:auto;
}
.role-reveal-inner{
  transform:scale(.85) translateY(10px);
  transition:transform .55s cubic-bezier(.2,1.5,.4,1);
}
.role-reveal-overlay.show .role-reveal-inner{
  transform:scale(1) translateY(0);
}
.role-reveal-team{
  font-family:'Orbitron',sans-serif;
  font-size:14px;
  letter-spacing:.4em;
  color:var(--danger);
  text-shadow:0 0 14px rgba(255,95,126,0.7);
  margin-bottom:22px;
}
.role-reveal-overlay.team-citizens .role-reveal-team{
  color:var(--cyan);
  text-shadow:0 0 14px rgba(63,242,255,0.7);
}
.role-reveal-img{
  display:block;
  max-width:min(88vw, 560px);
  max-height:62vh;
  margin:0 auto 26px;
  border-radius:14px;
  box-shadow:0 0 60px rgba(255,95,126,0.4);
}
.role-reveal-overlay.team-citizens .role-reveal-img{
  box-shadow:0 0 50px rgba(63,242,255,0.35);
}
.role-reveal-name{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:clamp(30px,6vw,46px);
  letter-spacing:.06em;
  color:#fff;
  text-shadow:0 0 24px rgba(255,95,126,0.7);
}
.role-reveal-overlay.team-citizens .role-reveal-name{
  text-shadow:0 0 24px rgba(63,242,255,0.7);
}

.action-row{
  margin-top:24px;
}
.action-row .btn{
  padding:18px 38px;
  font-size:13px;
}
.leave-btn{
  margin-top:20px;
}

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