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

/* ---------- Entry / lobby (structurally mirrors mafia's, default site
   cyan palette -- no custom theme override for this first pass) ---------- */
.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;
}
.room-size-row{
  display:flex;
  gap:8px;
}
.room-size-btn{
  flex:1;
  padding:12px 6px;
  border-radius:2px;
  border:1px solid rgba(63,242,255,0.35);
  background:rgba(63,242,255,0.06);
  color:#8fb6c9;
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  letter-spacing:.05em;
  cursor:pointer;
  transition:all .15s ease;
}
.room-size-btn:hover{
  border-color:var(--cyan);
  color:#fff;
}
.room-size-btn.active{
  background:linear-gradient(180deg, rgba(63,242,255,0.25), rgba(63,242,255,0.08));
  border-color:var(--cyan);
  color:#fff;
  box-shadow:0 0 16px rgba(63,242,255,0.35);
}
.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;
}
.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;
}
body.bang-table-view .page-wrap{
  max-width:1680px;
}
body.bang-table-view nav,
body.bang-table-view .page-tag,
body.bang-table-view .page-title,
body.bang-table-view .page-desc{
  display:none;
}
body.bang-table-view .table-panel{
  margin-top:28px;
}
.table-header{
  margin-bottom:14px;
}
/* Grid, not flex, with left/right columns pinned to the same 260px width --
   table-col-center used to only have a sidebar on its right (the broadcast
   log), so centering it with plain flex (center: flex:1 1 auto, right: fixed
   260px) left it centered on "full width minus 260px", visibly off-center
   from .table-header above (which centers on the *actual* full width -- the
   room code, stage label, etc.). Symmetric 260px columns on both sides fixes
   that regardless of what's in them. Left now holds myCharacterCard (mafia's
   role-card equivalent); briefly held nothing between the pending-panel
   move-out and this, in which case an empty grid cell reserving its track's
   width was enough on its own, no spacer div needed. */
.table-columns{
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 260px;
  align-items:start;
  gap:28px;
  margin-top:24px;
  text-align:left;
}
.table-col{
  min-width:0;
}
.table-col-left{
  grid-column:1;
}
.table-col-center{
  grid-column:2;
}
.table-col-right{
  grid-column:3;
}
@media (max-width:1100px){
  .table-columns{
    grid-template-columns:1fr;
  }
  .table-col-left,
  .table-col-center,
  .table-col-right{
    grid-column:1;
    width:100%;
  }
}

/* Left-column "my character" card -- mafia's .role-card equivalent
   (role-card-team/-name/-desc), just with a portrait added above the name
   since BANG!'s identity is a character, not a role. */
.my-character-card{
  padding:20px 18px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(63,242,255,0.1), rgba(255,255,255,0.02));
  border:1px solid rgba(63,242,255,0.4);
  text-align:center;
}
.my-character-card-art{
  width:100%;
  height:200px;
  margin-bottom:14px;
  background-color:rgba(255,255,255,0.04);
  background-size:cover;
  background-position:center;
  border:1px solid rgba(63,242,255,0.25);
  border-radius:8px;
}
.my-character-card-name{
  font-family:'Orbitron',sans-serif;
  font-size:19px;
  font-weight:900;
  color:#fff;
  margin-bottom:10px;
  text-shadow:0 0 12px rgba(63,242,255,0.5);
}
.my-character-card-desc{
  font-size:12.5px;
  line-height:1.7;
  color:#cfe8f2;
  /* Ability text is [능력 이름] on its own line, then the description --
     preserve that instead of collapsing it into one line like normal
     text-flow whitespace. */
  white-space:pre-line;
}
/* 캐릭터 카드 바로 아래, 내가 낀 시작 아이템 아이콘 (읽기 전용, 클릭하면
   itemDetailOverlay가 장착 버튼 없이 뜸). */
.my-items-row{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:12px;
}
.my-item-btn{
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
}
.my-item-icon{
  width:52px;
  height:52px;
  background-color:rgba(255,255,255,0.05);
  background-size:cover;
  background-position:center;
  border-radius:10px;
  border:1px solid rgba(255,210,63,0.5);
  transition:border-color .15s ease, transform .15s ease;
}
.my-item-btn:hover .my-item-icon{
  border-color:var(--cyan);
  transform:translateY(-2px);
}

/* 이상현상 card -- same shape as .my-character-card (sits right above it,
   same left column) but with the amber accent from the reveal overlay and a
   2:1 landscape image instead of a portrait one, since anomaly-art/ is
   landscape (see anomaly-reveal-image-wrap's own comment). Clickable to
   replay the reveal animation, same as the old top-bar badge it replaced. */
.anomaly-card{
  padding:16px 16px 18px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,150,50,0.12), rgba(255,255,255,0.02));
  border:1px solid rgba(255,150,50,0.4);
  text-align:center;
  margin-bottom:14px;
  cursor:pointer;
}
.anomaly-card-art{
  width:100%;
  aspect-ratio:2/1;
  margin-bottom:12px;
  background-color:#000;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,150,50,0.3);
  border-radius:8px;
}
.anomaly-card-name{
  font-family:'Orbitron',sans-serif;
  font-size:16px;
  font-weight:900;
  color:#ffb84d;
  margin-bottom:8px;
  text-shadow:0 0 12px rgba(255,150,50,0.5);
}
.anomaly-card-desc{
  font-size:12px;
  line-height:1.6;
  color:#eee;
  white-space:pre-line;
}

.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;
}
/* Moved from the table-header into .table-center (see tcTurnLabel in
   script.js) so whose turn it is reads right next to the deck/discard,
   instead of a separate line above the whole table -- .stage-label next to
   it is hidden during actual play now, since "게임 진행중" was redundant
   with a table + turn label already on screen. */
.table-center-turn{
  font-size:14px;
  font-weight:700;
  color:var(--warn);
  text-align:center;
}

.table-footer{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.test-mode-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
  color:var(--warn);
  cursor:pointer;
}
.test-mode-row input{
  accent-color:var(--warn);
  width:16px;
  height:16px;
  cursor:pointer;
}
.waiting-action-btn-row{
  display:flex;
  flex-direction:column;
  gap:10px;
}
/* 첫 줄: 시작 아이템/카드 스타일, 둘째 줄: 인물 도감/이상현상 도감 --
   요청대로 두 줄로 명시적으로 나눔. */
.waiting-action-btn-line{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

/* ---------- Seats ---------- */
.seats-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-bottom:14px;
}
@media (max-width:700px){
  .seats-list{ grid-template-columns:repeat(2, 1fr); }
}
.seat-row{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:14px 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;
  min-width:0;
}
.seat-row.me{
  border-color:rgba(63,242,255,0.55);
  background:rgba(63,242,255,0.1);
}
.seat-row.dead{
  opacity:.85;
  filter:grayscale(.75) brightness(.7);
}
.seat-row.current-turn{
  border-color:var(--warn);
  box-shadow:0 0 16px rgba(255,210,63,0.4);
}
/* 뱅의 좌석 배경은 원래 거의 투명(4~10%)해서, 테두리 애니메이션(::before,
   z-index:-1)이 카드 안쪽까지 그대로 비쳐 보여 눈이 아플 만큼 알록달록해짐 --
   마피아는 좌석 배경이 훨씬 진해서(62%) 이 문제가 없었음. 테두리가 있을 때만
   배경을 완전 불투명하게 올려서(투명도 0) 뒤 배경(별 등)이 전혀 안 비치고
   카드 안은 완전히 막힌 검정, 테두리만 도는 것처럼 보이게 함. */
.seat-row.has-frame{
  background:var(--bg);
}
.seat-nickname{
  font-family:'Orbitron',sans-serif;
  font-size:13.5px;
  color:#fff;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.seat-tag{
  font-size:9px;
  letter-spacing:.08em;
  padding:2px 6px;
  border-radius:2px;
  border:1px solid rgba(255,210,63,0.5);
  color:var(--warn);
}
.seat-tag.role{
  border-color:rgba(63,242,255,0.5);
  color:var(--cyan);
}
.seat-tag.role.mafia-role{
  border-color:rgba(255,95,126,0.5);
  color:var(--danger);
}
.seat-tag.wanted{
  border-color:rgba(255,95,126,0.5);
  color:var(--danger);
}
.seat-life{
  font-size:13px;
  letter-spacing:.05em;
  color:#ff8fa3;
}
.seat-life-bonus{
  color:#ffd23f;
  margin-left:2px;
}
.seat-hand-count{
  font-size:11px;
  color:#8fb6c9;
}
.seat-equipment{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  justify-content:center;
}
.seat-equip-chip{
  font-size:10px;
  padding:2px 6px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15);
  color:#cfe8f2;
}
.seat-dist{
  font-size:10px;
  color:#6f95a5;
}
.seat-aim{
  font-size:10px;
  color:var(--warn);
}
.seat-ready-label,
.seat-target-btn{
  width:100%;
  margin-top:4px;
  padding:6px 5px;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(63,242,255,0.25);
  border-radius:4px;
  color:#9fc4d6;
  font-size:11px;
  cursor:default;
}
.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;
}
.seat-kick-btn{
  width:100%;
  margin-top:4px;
  padding:6px 5px;
  background:rgba(255,95,126,0.08);
  border:1px solid rgba(255,95,126,0.4);
  border-radius:4px;
  color:var(--danger);
  font-size:11px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.seat-kick-btn:hover{
  background:rgba(255,95,126,0.2);
  border-color:var(--danger);
}
.seat-item-icons{
  display:flex;
  gap:8px;
  justify-content:center;
}
.seat-item-icon{
  width:46px;
  height:46px;
  background-color:rgba(255,255,255,0.05);
  background-size:cover;
  background-position:center;
  border-radius:9px;
  border:1px solid rgba(255,210,63,0.5);
}

/* ---------- Perimeter table layout (playing/ended) ----------
   Player zones sit along the four edges of the table like a physical
   card-table simulator, with the equipped weapon rendered as its own
   card-shaped block flush against the zone instead of just another chip.
   Text/emoji placeholders for now -- structured so real card art can drop
   into .weapon-card / .card-btn later without a layout rewrite. */
.bang-table{
  display:grid;
  /* left/right are a fixed width, not a flexible fraction -- an frbased
     share grows with however wide the table happens to be (page width,
     viewport), which drifted out of sync with top/bottom's fixed 180px
     .seat-zone basis below (see .table-top .seat-zone) the moment the table
     got wider. Pinning both to the same 180px keeps all four sides visually
     matched regardless of table width; center (which only ever holds the
     small deck/discard block) just absorbs whatever's left over. */
  grid-template-columns:180px minmax(200px,1fr) 180px;
  grid-template-areas:
    "top    top    top"
    "left   center right"
    "bottom bottom bottom";
  gap:12px;
  margin-bottom:14px;
  padding:16px;
  background:rgba(120,80,30,0.08);
  border:1px solid rgba(120,80,30,0.3);
  border-radius:10px;
}
.table-top{ grid-area:top; }
.table-bottom{ grid-area:bottom; }
.table-left{ grid-area:left; }
.table-right{ grid-area:right; }
.table-top, .table-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.table-left, .table-right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.table-center{
  grid-area:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:120px;
  padding:14px;
  background:rgba(0,0,0,0.25);
  border:1px dashed rgba(255,255,255,0.15);
  border-radius:8px;
}
.table-center-stat{
  font-size:13px;
  color:#cfe8f2;
}
.table-center-discard-label{
  font-size:11px;
  color:#8fb6c9;
  margin-top:2px;
}
/* Reuses .card-btn's coloring/background-image machinery (see its comment
   on background-color vs background) just sized down to fit the table
   center -- shows the actual last-played card art instead of its name. */
.table-center-discard{
  width:64px;
  height:90px;
  min-width:0;
  cursor:default;
}
.table-center-discard:hover{
  transform:none;
  box-shadow:none;
}
@media (max-width:700px){
  .bang-table{
    grid-template-columns:1fr;
    grid-template-areas:
      "top" "left" "center" "right" "bottom";
  }
}

.seat-zone{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  background:rgba(63,242,255,0.04);
  border:1px solid rgba(63,242,255,0.15);
  border-radius:7px;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
  min-width:0;
}
.seat-zone:hover{
  border-color:var(--cyan);
  transform:translateY(-2px);
}
.table-left .seat-zone, .table-right .seat-zone{ width:100%; }
/* Left/right columns are grid tracks with a real width, so .seat-zone's
   width:100% above is enough to keep their portrait/weapon icons from
   collapsing. top/bottom are a wrapping flex row instead -- without an
   explicit basis here, .seat-visual-row's flex:1 1 0 children (seat-portrait/
   seat-weapon-icon) had nothing definite to size against and collapsed
   toward 0 width whenever 2+ zones shared the row (7-player games always
   put 2 up top), which is what actually squashed those portraits flat. */
.table-top .seat-zone, .table-bottom .seat-zone{ flex:0 1 180px; min-width:140px; }
.seat-zone.me{
  border-color:rgba(63,242,255,0.55);
  background:rgba(63,242,255,0.1);
}
.seat-zone.dead{
  opacity:.85;
  filter:grayscale(.75) brightness(.7);
}
.seat-zone.current-turn{
  border-color:var(--warn);
  box-shadow:0 0 16px rgba(255,210,63,0.4);
}
/* 현상수배: 지목된 상태는 공개 정보라 좌석 전체에 빨간 테두리로 표시.
   .current-turn(노란 테두리)과 동시에 걸리면 이 규칙이 스타일시트에서 더
   뒤에 있어 빨간 테두리가 우선함 -- 닉네임 옆 🎯 뱃지가 그럴 때도 "지금
   턴"이라는 정보 자체는 계속 보여준다. */
.seat-zone.wanted{
  border-color:rgba(255,95,126,0.7);
  box-shadow:0 0 16px rgba(255,95,126,0.45);
}
/* 뱅! 조준 리티클 -- 이 좌석이 뱅! pending의 respondingSeat인 동안(모든
   뷰어에게 공개되는 정보) buildSeatZone()이 .seat-visual-row(초상화+무기
   아이콘 줄) 안에 붙임 -- zone 전체가 아니라 여기에만 씌워야 그 아래
   닉네임/체력/카드 수/장비 텍스트가 안 가려짐. pointer-events:none이라
   좌석 클릭(openSeatDetail)은 그대로 통과됨. */
.seat-target-overlay{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:55% auto;
  pointer-events:none;
  z-index:5;
  animation:bangTargetPulse 1s ease-in-out infinite;
}
@keyframes bangTargetPulse{
  0%, 100%{ opacity:.8; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.1); }
}
/* 감옥에 갇힌 좌석의 .seat-visual-row 위에 뜨는 창살 오버레이 (마찬가지로
   zone 전체가 아니라 초상화 줄에만) -- z-index가 .seat-target-overlay(5)
   보다 낮아서, 감옥에 갇힌 사람이 뱅!까지 맞으면 창살 위에 조준 리티클이
   겹쳐 보인다 (buildSeatZone()이 이 순서로 붙임). */
.seat-jail-overlay{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  pointer-events:none;
  z-index:4;
}
/* Portrait + equipped-weapon icon side by side, clicking the seat opens
   openSeatDetail() which shows both (plus the rest of the loadout) as
   separate, individually-clickable pieces. Portrait is a placeholder until
   per-character art exists (see content/bang/CLAUDE.md). */
.seat-visual-row{
  position:relative; /* anchors .seat-jail-overlay/.seat-target-overlay -- scoped
                         to just the portrait/weapon row so the nickname/life/
                         hand-count/equipment text below never gets covered */
  display:flex;
  gap:6px;
  padding:8px 8px 0;
}
.seat-portrait,
.seat-weapon-icon{
  flex:1 1 0;
  min-height:64px;
  border-radius:5px;
  background-color:rgba(255,255,255,0.05);
  background-repeat:no-repeat;
  background-position:center;
  border:1px solid rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
/* Real character photos fill the box (crop rather than letterbox) -- weapon
   icons stay "contain" since those reuse the full playing-card art. */
.seat-portrait{
  font-size:26px;
  background-size:cover;
  cursor:pointer;
}
.seat-weapon-icon{
  font-size:10.5px;
  font-weight:600;
  color:#e8dcc0;
  /* gun-image/ art tends to be pale/silvery, so a single tight shadow wasn't
     enough contrast for light-colored text (e.g. "스코필드" over a chrome
     revolver) -- added a second, wider glow layer, same two-layer shape
     .card-btn/.hand-card already use elsewhere. */
  text-shadow:0 1px 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.85);
  padding:4px;
  background-size:contain;
}
.seat-weapon-icon.unequipped{
  color:#6f95a5;
  opacity:.7;
}
.seat-zone-info{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:10px 8px;
  min-width:0;
  text-align:center;
}
.seat-meta-row{
  display:flex;
  gap:8px;
  font-size:11px;
  color:#8fb6c9;
}

/* ---------- Deck / hand / target / pending / discard / general store ---------- */

.my-hand-panel{
  margin-bottom:20px;
  padding:16px;
  background:rgba(63,242,255,0.05);
  border:1px solid rgba(63,242,255,0.2);
  border-radius:8px;
}
/* Dying reaction only now (Duel/Indians!/Gatling moved to their own
   dedicated overlays below) -- same treatment as .bang-react-box (its own
   dedicated centered modal instead of pinned in the left column), just a
   plain field-label + button row rather than a title, so it doesn't need
   bang-react-box's extra styling. */
.pending-box{
  max-width:380px;
}
.pending-actions{
  flex-direction:column;
}
.pending-actions .btn{
  width:100%;
}

/* ---------- 마음의 눈 (Mind's Eye reveal) ----------
   대상의 패를 한 번 훔쳐본 스냅샷을 보여주는 팝업 -- .my-hand-row/.hand-card
   재사용, 카드 수가 많아도 잘 보이게 기본 .modal-box보다 살짝 넓힘, 클릭
   동작이 없는 순수 정보 표시라 커서만 default로 되돌림. */
.mind-eye-box{
  max-width:480px;
}
.mind-eye-hand-row .hand-card{
  cursor:default;
}
.mind-eye-hand-row .hand-card:hover{
  transform:none;
  box-shadow:none;
}

/* ---------- 결투장 (Duel arena) ----------
   콜로세움 이미지를 배경으로 깔고 위쪽을 큼직한 border-radius로 둥글려서
   아치문 같은 느낌을 냄. 잡화점처럼 전원에게 뜨고 respondingSeat만 아래
   버튼이 보임. 결과가 나오면(.resolved) 회색조로 바뀌고 승리 문구만 남음. */
.duel-arena-box{
  position:relative;
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:36px 28px 26px;
  border-radius:170px 170px 14px 14px;
  background-color:#0a0602;
  background-size:cover;
  background-position:center 30%;
  border:3px solid rgba(255,210,63,0.6);
  box-shadow:0 0 50px rgba(0,0,0,0.7), inset 0 0 70px rgba(0,0,0,0.55);
  text-align:center;
  color:#fff;
  transition:filter .6s ease;
}
.duel-arena-box.resolved{
  filter:grayscale(1) brightness(.55);
}
.duel-arena-title{
  font-family:'Orbitron',sans-serif;
  font-size:22px;
  font-weight:900;
  letter-spacing:.15em;
  color:var(--warn);
  text-shadow:0 0 16px rgba(255,210,63,0.7), 0 2px 6px rgba(0,0,0,0.9);
  margin-bottom:18px;
}
.duel-vs-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-bottom:16px;
}
.duel-side{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:0;
}
.duel-portrait{
  width:84px;
  height:84px;
  border-radius:50%;
  background-color:rgba(0,0,0,0.5);
  background-size:cover;
  background-position:center;
  border:2px solid rgba(255,255,255,0.5);
  box-shadow:0 0 16px rgba(0,0,0,0.6);
}
.duel-name{
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  font-weight:700;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,0.9);
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.duel-vs-label{
  font-family:'Orbitron',sans-serif;
  font-size:20px;
  font-weight:900;
  color:var(--danger);
  text-shadow:0 0 14px rgba(255,95,126,0.8), 0 2px 6px rgba(0,0,0,0.9);
}
.duel-status{
  font-size:13px;
  color:#e6f7ff;
  text-shadow:0 2px 6px rgba(0,0,0,0.9);
  margin-bottom:14px;
  min-height:18px;
}
.duel-result{
  font-family:'Orbitron',sans-serif;
  font-size:19px;
  font-weight:900;
  color:var(--warn);
  text-shadow:0 0 20px rgba(255,210,63,0.9), 0 2px 6px rgba(0,0,0,0.9);
  margin-bottom:14px;
}
.duel-actions{
  justify-content:center;
}

/* ---------- 인디언!/기관총 습격 필드 ----------
   target-seat-table의 top/left/right/bottom 4분할을 재사용 -- 카드 쓴
   사람만 빼고 나머지가 이 필드에 놓이고, 상태(대기/차례/막음/피격)가
   실시간으로 바뀐다. .raid-box에 붙는 indians/gatling 클래스로 색만 갈아끼움. */
.raid-box{
  max-width:580px;
}
.raid-title{
  font-family:'Orbitron',sans-serif;
  font-size:19px;
  font-weight:900;
  letter-spacing:.06em;
  color:var(--cyan);
  margin-bottom:4px;
}
.raid-subtitle{
  font-size:12px;
  color:#9fc4d6;
  margin-bottom:6px;
}
.raid-field{
  margin:14px 0;
}
.raid-seat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.03);
  min-width:76px;
  transition:border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.raid-seat-portrait{
  width:52px;
  height:52px;
  border-radius:50%;
  background-color:rgba(0,0,0,0.4);
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,0.25);
}
.raid-seat-name{
  font-size:11px;
  color:#fff;
  font-weight:600;
  max-width:70px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.raid-seat-status{
  font-size:10px;
  padding:2px 6px;
  border-radius:10px;
  background:rgba(255,255,255,0.08);
  color:#9fc4d6;
}
.raid-seat.current{
  border-color:var(--warn);
  box-shadow:0 0 14px rgba(255,210,63,0.45);
}
.raid-seat.current .raid-seat-status{
  background:rgba(255,210,63,0.15);
  color:var(--warn);
}
.raid-seat.dodged{
  opacity:.75;
}
.raid-seat.dodged .raid-seat-status{
  background:rgba(77,255,160,0.15);
  color:var(--success);
}
.raid-seat.hit{
  opacity:.6;
  filter:grayscale(.5);
}
.raid-seat.hit .raid-seat-status{
  background:rgba(255,95,126,0.15);
  color:var(--danger);
}
/* 인디언! -- 따뜻한 사막/부족 느낌 (테라코타 톤). general-store-shelf의
   나무 결 그라디언트와 같은 원리로, .raid-field에 담요/천막 무늬처럼
   보이는 사선 줄무늬 배경을 깐다. */
.raid-box.indians{
  border-color:rgba(224,163,92,0.45);
}
.raid-box.indians .raid-title{ color:#e0a35c; }
.raid-box.indians .raid-subtitle{ color:#c9a583; }
.raid-box.indians .raid-field{
  padding:14px 10px;
  border-radius:8px;
  background:
    repeating-linear-gradient(135deg,
      rgba(224,163,92,0.16) 0px, rgba(224,163,92,0.16) 16px,
      rgba(150,82,38,0.16) 16px, rgba(150,82,38,0.16) 32px),
    linear-gradient(180deg, rgba(110,62,26,0.16), rgba(50,26,12,0.26));
  border:1px solid rgba(224,163,92,0.35);
  box-shadow:inset 0 -6px 10px -4px rgba(0,0,0,0.5);
}
.raid-box.indians .raid-seat{
  background:rgba(12,8,4,0.62);
  border-color:rgba(224,163,92,0.25);
}
.raid-box.indians .raid-seat-status{
  background:rgba(0,0,0,0.4);
  color:#e8d3bb;
}
.raid-box.indians .raid-seat.current{
  border-color:#ffcf8a;
  box-shadow:0 0 14px rgba(224,163,92,0.45);
}
.raid-box.indians .raid-seat.current .raid-seat-status{
  background:rgba(10,6,2,0.7);
  color:#ffcf8a;
  font-weight:700;
}
/* 기관총 -- 금속/화기 느낌. .raid-field에 경고 줄무늬(해저드 테이프) +
   어두운 금속 그라디언트 배경을 깐다. */
.raid-box.gatling{
  border-color:rgba(255,95,126,0.45);
}
.raid-box.gatling .raid-title{ color:var(--danger); }
.raid-box.gatling .raid-subtitle{ color:#d69aa5; }
.raid-box.gatling .raid-field{
  padding:14px 10px 16px;
  border-radius:8px;
  position:relative;
  background:
    linear-gradient(180deg, rgba(60,64,70,0.3), rgba(20,22,26,0.4));
  border:1px solid rgba(255,95,126,0.3);
  box-shadow:inset 0 -6px 10px -4px rgba(0,0,0,0.6);
}
.raid-box.gatling .raid-field::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:6px;
  border-radius:8px 8px 0 0;
  background:repeating-linear-gradient(135deg,
    #2a2a2a 0px, #2a2a2a 8px,
    #ffd23f 8px, #ffd23f 16px);
  opacity:.55;
}
.raid-box.gatling .raid-seat{
  background:rgba(24,24,28,0.4);
  border-color:rgba(255,95,126,0.18);
}
.raid-box.gatling .raid-seat.current{
  border-color:var(--danger);
  box-shadow:0 0 14px rgba(255,95,126,0.45);
}
.raid-box.gatling .raid-seat.current .raid-seat-status{
  background:rgba(255,95,126,0.15);
  color:var(--danger);
}
.raid-actions{
  justify-content:center;
}
.my-hand-panel{
  text-align:center;
}
/* Sits right under the hand, in the center column -- .table-columns sets
   text-align:left so it needs its own centering rather than inheriting
   .table-panel's. */
.end-turn-btn{
  display:block;
  margin:16px auto 0;
}
.force-advance-turn-btn{
  display:block;
  margin:10px auto 0;
  padding:8px 16px;
  font-size:11px;
  color:var(--warn);
  border-color:rgba(255,210,63,0.5);
}
.force-advance-turn-btn:hover{
  background:var(--warn);
  color:#241a04;
  box-shadow:0 0 20px rgba(255,210,63,0.5);
}
/* Hand row sits under the table, cards laid out like a fan in-hand rather
   than the plain wrapped button list used for the general-store pick (that
   keeps .my-hand-list below). Discard reuses this same row in place --
   see .discard-mode -- instead of jumping to a separate panel elsewhere. */
.my-hand-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.my-hand-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.card-btn{
  padding:10px 8px;
  min-width:64px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.2);
  background-color:rgba(255,255,255,0.04);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  color:#fff;
  font-size:12.5px;
  text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.7);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
/* background-color (longhand), not background (shorthand) -- the shorthand
   would reset background-size/repeat/position to their initial values,
   which breaks JS's inline background-image (set separately, per-card, when
   a card-art style is active) back to tiled/native-size/top-left instead of
   the intended contain/no-repeat/center. Same class of bug as the mafia
   page-title fix earlier this session -- see that page's style.css comment. */
.card-btn.brown{
  border-color:rgba(180,130,80,0.6);
  background-color:rgba(180,130,80,0.1);
}
.card-btn.blue{
  border-color:rgba(63,150,242,0.6);
  background-color:rgba(63,150,242,0.1);
}
.card-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(0,0,0,0.4);
}
.card-btn:disabled{
  opacity:.5;
  cursor:default;
}
.card-btn:disabled:hover{
  transform:none;
  box-shadow:none;
}
.card-btn.selected{
  border-color:var(--warn);
  box-shadow:0 0 14px rgba(255,210,63,0.5);
}
/* .hand-card is the taller, playing-card-proportioned variant used in the
   hand row -- structurally the same idea as .card-btn (recolored by
   .brown/.blue, same hover lift) but sized/laid out like a real card so
   real card art can drop in later without another layout pass. */
.hand-card{
  width:84px;
  height:118px;
  padding:8px 6px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.2);
  background-color:rgba(255,255,255,0.04);
  /* JS sets background-image inline (card-art/<style>_<key>.png) when a
     style is picked -- contain (not cover) so the card frame's shape isn't
     cropped; a missing file just leaves this blank, no broken-image icon,
     since it's a background-image and not an <img>. */
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  color:#fff;
  font-size:12.5px;
  font-weight:600;
  text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.7);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.hand-card.brown{
  border-color:rgba(180,130,80,0.6);
  background-color:rgba(180,130,80,0.1);
}
.hand-card.blue{
  border-color:rgba(63,150,242,0.6);
  background-color:rgba(63,150,242,0.1);
}
.hand-card.unusable{
  opacity:.55;
}
/* 박은지 [진실의 방] -- unusable의 흐릿함은 그대로 두되, "왜" 못 내는지를
   보라색 테두리로 구분해서 보여줌(턴/페이즈 때문에 못 내는 것과 헷갈리지
   않게). */
.hand-card.eundi-sealed{
  border-color:var(--magenta);
  box-shadow:0 0 8px rgba(192,77,255,0.5);
  position:relative;
}
.hand-card.eundi-sealed::after{
  content:'🔒';
  position:absolute;
  top:2px;
  right:4px;
  font-size:11px;
}
/* Forced discard phase -- every hand card becomes clickable-to-discard, so
   the border goes red as a "this click discards it" cue instead of the
   normal usable/unusable dimming (irrelevant here, nothing is "unusable"
   during discard). */
.hand-card.discard-mode{
  border-color:var(--danger);
  box-shadow:0 0 10px rgba(255,95,126,0.35);
}
.hand-card:hover{
  transform:translateY(-6px);
  box-shadow:0 6px 16px rgba(0,0,0,0.45);
}
/* 성현 [인싸]: 이 턴의 첫 카드는 뭘 내든 잡화점으로 바뀐다는 걸 알려주는
   손패 전체 강조 -- .discard-mode(빨강)와 같은 자리, 노란 톤으로. 평소엔
   은은한 테두리만, hover 시 확 밝아지는 걸로 "이거 지금 누르면 그거 됨"을
   강조. */
.hand-card.seunghyun-first-card{
  border-color:rgba(255,210,63,0.55);
  box-shadow:0 0 8px rgba(255,210,63,0.25);
}
.hand-card.seunghyun-first-card:hover{
  border-color:var(--warn);
  box-shadow:0 6px 16px rgba(0,0,0,0.45), 0 0 18px rgba(255,210,63,0.75);
}

.target-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin:10px 0;
}
/* Panic!/Cat Balou's hand-index and equip-item pickers reuse .card-btn
   inside .target-grid, but at .card-btn's default 64px-ish size the "?"
   face-down art (or an equipped item's art) was too small to read as a
   card. Sized closer to .hand-card instead. */
.steal-hand-card{
  width:96px;
  height:134px;
  font-size:14px;
}
/* Step 1's seat-shaped target picker -- same top/left/right/bottom idea as
   .bang-table, but simpler (no card art, no center content) and sized to fit
   a modal box rather than the full table. A seat that isn't a legal target
   for the card being played still gets a button in its slot (disabled, via
   .target-btn:disabled below) instead of being skipped, so the layout always
   reads as "the table" and it's visually obvious *why* a seat is missing
   from your options rather than it just not being there. */
.target-overlay-box{
  max-width:520px;
}
/* Wide enough for a full 7-card reveal (max room size) at .hand-card's size
   to fit ~4 per row before wrapping, rather than the default .modal-box's
   420px cramming them into 3-wide. See renderGeneralStorePanel() in
   script.js for the .hand-card class swap that makes the cards themselves
   this big in the first place (previously .card-btn-sized, much smaller). */
.general-store-box{
  max-width:600px;
}
/* ---------- 잡화점 (General Store) -- 열리는 순간부터 다 가져갈 때까지
   전원에게 계속 떠있고, respondingSeat인 사람만 카드가 클릭 가능하다
   (나머지는 .shelf-locked로 흐리게). 나무 판자 선반 위에 카드가 놓인
   느낌 + 가져간 카드를 영수증처럼 아래에 쌓아서 보여준다. ---------- */
.general-store-header{
  margin-bottom:14px;
}
.general-store-title{
  font-family:'Orbitron',sans-serif;
  font-size:20px;
  font-weight:900;
  letter-spacing:.05em;
  color:var(--warn);
  text-shadow:0 0 14px rgba(255,210,63,0.5);
}
.general-store-subtitle{
  margin-top:4px;
  font-size:12.5px;
  color:#9fc4d6;
}
.general-store-subtitle.my-turn{
  color:var(--cyan);
  font-weight:700;
  text-shadow:0 0 8px rgba(63,242,255,0.5);
}
.general-store-shelf{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding:16px 14px 20px;
  margin-bottom:16px;
  border-radius:8px;
  /* 나무 판자 느낌 -- 세로 결 그라디언트 반복 + 아래쪽에 선반 턱처럼
     보이는 그림자. */
  background:
    repeating-linear-gradient(90deg,
      rgba(120,80,45,0.35) 0px, rgba(120,80,45,0.35) 26px,
      rgba(90,58,30,0.35) 26px, rgba(90,58,30,0.35) 52px),
    linear-gradient(180deg, rgba(120,80,45,0.18), rgba(60,38,20,0.28));
  border:1px solid rgba(180,130,80,0.4);
  box-shadow:inset 0 -6px 10px -4px rgba(0,0,0,0.5);
}
.hand-card.shelf-locked{
  cursor:not-allowed;
  opacity:.6;
  filter:grayscale(.3);
}
.hand-card.shelf-locked:hover{
  transform:none;
  box-shadow:none;
}
.general-store-picks-label{
  font-size:11px;
  letter-spacing:.08em;
  color:#8fb6c9;
  text-align:left;
  margin-bottom:6px;
}
.general-store-picks{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:140px;
  overflow-y:auto;
  text-align:left;
}
.general-store-pick-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:6px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  font-size:12.5px;
}
.general-store-pick-row.me{
  border-color:rgba(63,242,255,0.4);
  background:rgba(63,242,255,0.06);
}
.general-store-pick-who{
  color:#fff;
  font-weight:600;
  white-space:nowrap;
}
.general-store-pick-arrow{
  color:#6f95a5;
}
.general-store-pick-card{
  color:#cfe8f2;
}
.general-store-pick-card.brown{
  color:#e0b98a;
}
.general-store-pick-card.blue{
  color:#8fc4f2;
}
.target-seat-table{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:"top top top" "left . right" "bottom bottom bottom";
  gap:10px;
  margin:16px 0;
}
.target-seat-top{
  grid-area:top;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.target-seat-left,
.target-seat-right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.target-seat-left{ grid-area:left; }
.target-seat-right{ grid-area:right; }
.target-seat-bottom{
  grid-area:bottom;
  display:flex;
  justify-content:center;
}
.target-btn{
  padding:10px 16px;
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  color:var(--cyan);
  background:rgba(63,242,255,0.06);
  border:1px solid rgba(63,242,255,0.35);
  border-radius:5px;
  cursor:pointer;
}
.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;
}

.pending-actions .btn{
  padding:12px 20px;
  font-size:13px;
}

/* ---------- Card detail / target-picker modals ---------- */
.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.97);
  backdrop-filter:blur(4px);
}
.modal-box{
  width:100%;
  max-width:420px;
  max-height:90vh;
  overflow-y:auto;
  padding:28px 26px;
  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);
  border-radius:10px;
  text-align:center;
}
.card-detail-art{
  width:160px;
  height:224px;
  margin:0 auto 16px;
  background-color:rgba(255,255,255,0.04);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
}
/* Reused for the character-ability popup (openCharacterDetail) -- a real
   photo should fill the frame like the seat portraits do, not letterbox like
   action-card art does. */
.card-detail-art.character-mode{
  background-size:cover;
}
/* ---------- Card style picker (card-art/<style>.png preview set) ---------- */
.card-style-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin:16px 0;
}
.card-style-option{
  width:140px;
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.03);
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card-style-option:hover{
  transform:translateY(-3px);
  border-color:var(--cyan);
}
.card-style-option.active{
  border-color:var(--warn);
  box-shadow:0 0 16px rgba(255,210,63,0.4);
}
.card-style-preview{
  width:100%;
  height:168px;
  margin-bottom:8px;
  background-color:rgba(255,255,255,0.05);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  border-radius:6px;
}
.card-style-label{
  font-family:'Orbitron',sans-serif;
  font-size:14px;
  font-weight:700;
  color:#fff;
}

/* ---------- 인물 도감 (로비, character-art/<key>.png 초상화 그리드) ----------
   .card-style-option과 같은 타일 느낌이지만 12명이 한 번에 들어가야 해서
   더 작고 촘촘하게 -- 클릭하면 openCharacterDetail()로 넘어가는 순수
   내비게이션 타일이라 .active 상태는 없음(선택/유지 개념이 없음). */
.character-guide-box{
  max-width:600px;
}
.character-guide-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:16px 0;
}
.character-guide-tile{
  width:100px;
  padding:6px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.03);
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.character-guide-tile:hover{
  transform:translateY(-3px);
  border-color:var(--cyan);
  box-shadow:0 0 14px rgba(63,242,255,0.35);
}
.character-guide-portrait{
  width:100%;
  aspect-ratio:3/4;
  margin-bottom:6px;
  background-color:rgba(255,255,255,0.05);
  background-size:cover;
  background-position:center;
  border-radius:6px;
}
.character-guide-name{
  font-size:12px;
  font-weight:700;
  color:#fff;
}

/* 이상현상 도감 -- 인물 도감과 같은 그리드/타일 패턴이지만 초상화(3:4)
   대신 이상현상 로고(2:1, .anomaly-vote-tile-art/.anomaly-card-art와 같은
   비율)를 씀. */
.anomaly-guide-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:16px 0;
}
.anomaly-guide-tile{
  width:120px;
  padding:6px;
  border-radius:8px;
  border:1px solid rgba(255,150,50,0.3);
  background:rgba(255,255,255,0.03);
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.anomaly-guide-tile:hover{
  transform:translateY(-3px);
  border-color:var(--cyan);
  box-shadow:0 0 14px rgba(63,242,255,0.35);
}
.anomaly-guide-art{
  width:100%;
  aspect-ratio:2/1;
  margin-bottom:6px;
  background-color:#000;
  background-size:cover;
  background-position:center;
  border-radius:6px;
}
.anomaly-guide-name{
  font-size:12px;
  font-weight:700;
  color:#fff;
}

/* ---------- 이상현상 투표 (게임 시작 직후, 캐릭터 배정 전) ---------- */
.anomaly-vote-panel{
  text-align:center;
  padding:8px 0 4px;
}
.anomaly-vote-title{
  font-family:'Orbitron',sans-serif;
  font-size:20px;
  font-weight:900;
  color:#ffb84d;
  text-shadow:0 0 14px rgba(255,150,50,0.5);
  margin-bottom:6px;
}
.anomaly-vote-countdown{
  font-family:'Orbitron',sans-serif;
  font-size:36px;
  font-weight:900;
  color:#fff;
  text-shadow:0 0 18px rgba(255,210,63,0.6);
  margin-bottom:16px;
}
.anomaly-vote-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.anomaly-vote-grid.locked{
  pointer-events:none;
}
/* 매 게임 무작위 3개만 뽑아서 보여주는 것으로 바뀌어서(pick_random_anomaly_
   choices()), 타일 하나당 공간이 넉넉해져 설명 텍스트까지 통째로 보여줄 수
   있게 됨 -- "?" 눌러야만 보이던 정보 버튼은 이제 필요 없어서 제거. */
.anomaly-vote-tile{
  width:260px;
  padding:14px;
  border-radius:12px;
  border:1px solid rgba(255,150,50,0.35);
  background:rgba(255,255,255,0.03);
  cursor:pointer;
  position:relative;
  text-align:center;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.anomaly-vote-tile:hover{
  transform:translateY(-3px);
  border-color:var(--cyan);
  box-shadow:0 0 14px rgba(63,242,255,0.35);
}
.anomaly-vote-tile.mine{
  border-color:var(--warn);
  box-shadow:0 0 12px rgba(255,210,63,0.45);
}
.anomaly-vote-tile.won{
  border-color:#ffb84d;
  box-shadow:0 0 22px rgba(255,150,50,0.8);
}
.anomaly-vote-tile-art{
  width:100%;
  aspect-ratio:2/1;
  margin-bottom:10px;
  background-color:#000;
  background-size:cover;
  background-position:center;
  border-radius:8px;
}
.anomaly-vote-tile-name{
  font-family:'Orbitron',sans-serif;
  font-size:17px;
  font-weight:900;
  color:#ffb84d;
  margin-bottom:8px;
}
.anomaly-vote-tile-desc{
  font-size:13px;
  line-height:1.6;
  color:#dfeaf2;
  margin-bottom:12px;
  min-height:60px;
}
.anomaly-vote-circles{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  min-height:20px;
}
.anomaly-vote-circle-row{
  display:flex;
  justify-content:center;
  gap:3px;
}
.anomaly-vote-circle{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--warn);
  box-shadow:0 0 4px rgba(255,210,63,0.7);
  transition:transform .1s ease, box-shadow .1s ease;
}
.anomaly-vote-circle.lit{
  transform:scale(1.6);
  box-shadow:0 0 10px rgba(255,210,63,1);
}
.anomaly-vote-circle.won{
  background:#ffb84d;
  box-shadow:0 0 12px rgba(255,150,50,1);
}

/* ---------- 시작 아이템 (Level 1: 슬롯 / Level 2: 목록 / Level 3: 상세) ---------- */
.item-slots-row{
  display:flex;
  gap:20px;
  justify-content:center;
  margin:16px 0;
}
.item-slot-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:120px;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.03);
  cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
}
.item-slot-btn:hover{
  transform:translateY(-3px);
  border-color:var(--cyan);
}
.item-slot-icon{
  width:88px;
  height:88px;
  background-color:rgba(255,255,255,0.05);
  background-size:cover;
  background-position:center;
  border-radius:10px;
  border:1px solid rgba(255,210,63,0.4);
}
.item-slot-label{
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  font-weight:700;
  color:#fff;
}
/* 카테고리 한 줄에 최대 4개(패시브 기준)까지 안 잘리고 다 들어가도록 기본
   .modal-box(420px)보다 넓게 -- .item-picker-option 110px * 4 + gap 12px*3
   = 476px, 여기에 모달 좌우 패딩(26px*2)까지 감안. */
.item-picker-box{
  max-width:600px;
}
.item-picker-grid{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:20px;
  margin:16px 0;
}
/* ---------- 장비 전용: 게임 시작 시/1회용/패시브 3단 구분
   (.item-picker-section, renderGearCategorySections()) ---------- */
.item-picker-section-label{
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--cyan);
  text-align:left;
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(63,242,255,0.2);
}
.item-picker-section-items{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:12px;
}
.item-picker-option{
  width:110px;
  padding:8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.03);
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.item-picker-option:hover{
  transform:translateY(-3px);
  border-color:var(--cyan);
}
.item-picker-option.active{
  border-color:var(--warn);
  box-shadow:0 0 16px rgba(255,210,63,0.4);
}
.item-picker-icon{
  width:100%;
  height:88px;
  margin-bottom:6px;
  background-color:rgba(255,255,255,0.05);
  background-size:cover;
  background-position:center;
  border-radius:8px;
}
.item-picker-name{
  font-size:11.5px;
  font-weight:600;
  color:#fff;
}
.item-picker-empty-msg{
  color:#8fb6c9;
  font-size:13px;
  margin:20px 0;
}

/* ---------- "장착 해제" -- 목록과 분리된 단독 버튼, Level 2 그리드 위에
   고정. 장비/탄생석 공용. ---------- */
.item-picker-unequip-btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:14px 0;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.03);
  color:#cfe8f2;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.item-picker-unequip-btn:hover{
  border-color:var(--cyan);
}
.item-picker-unequip-btn.active{
  border-color:var(--warn);
  box-shadow:0 0 16px rgba(255,210,63,0.4);
  color:#fff;
}
.item-picker-unequip-icon{
  width:36px;
  height:36px;
  flex:0 0 auto;
  background-color:rgba(255,255,255,0.05);
  background-size:cover;
  background-position:center;
  border-radius:8px;
}

/* ---------- 탄생석 전용: 달별 카드 (item-picker-grid.month-mode) ----------
   일반 장비 그리드(.item-picker-option, 아이템 1개=타일 1개)와 달리, 탄생석은
   달 하나에 캐릭터가 여럿 배정될 수 있어서(예: 3월 = 김도희+박승환) 카드
   하나 = 달 하나이고, 그 안에 캐릭터별 얼굴 칩이 여러 개 들어간다. 달마다
   한 줄씩 세로로 쌓는 레이아웃(2개씩 나란히 X) -- 카드 하나가 폭 전체를
   쓰고, 안에서는 보석 이미지(왼쪽)+월 라벨/칩(오른쪽) 가로 배치. */
.item-picker-grid.month-mode{
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}
.item-picker-month-card{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(192,77,255,0.3);
  /* 우주 느낌: 카드 배경에 작은 별들 + 시안/마젠타 성운 글로우를 깔아서
     보석 이미지 주변 여백이 우주 배경처럼 보이게 함 (보석 png 자체는
     불투명이라 이 배경은 이미지 바깥 여백에서만 보임). */
  background:
    radial-gradient(1.5px 1.5px at 8% 20%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 15%, #fff, transparent 60%),
    radial-gradient(1px 1px at 60% 85%, #fff, transparent 60%),
    radial-gradient(1px 1px at 40% 70%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 60%, #fff, transparent 60%),
    radial-gradient(ellipse at 15% 30%, rgba(63,242,255,0.14), transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(192,77,255,0.14), transparent 55%),
    #05060f;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.item-picker-month-card:hover{
  border-color:var(--cyan);
}
.item-picker-month-img{
  width:90px;
  height:90px;
  flex:0 0 auto;
  background-color:rgba(255,255,255,0.05);
  background-size:cover;
  background-position:center;
  border-radius:10px;
  box-shadow:0 0 18px rgba(63,242,255,0.25);
}
.item-picker-month-info{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  min-width:0;
}
.item-picker-month-label{
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  font-weight:700;
  color:#fff;
}
.item-picker-month-chips{
  display:flex;
  gap:10px;
  justify-content:flex-start;
  flex-wrap:wrap;
}
/* 사진(칩) + 이름표를 한 세트로 묶어서 작은 카드처럼 보이게 -- 이름이
   항상 보여야 같은 달에 여럿 있어도(예: 3월 김도희/박승환) 사진만 보고
   헷갈리지 않는다. */
.item-picker-month-chip-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  width:60px;
}
.item-picker-month-chip{
  width:60px;
  height:60px;
  border-radius:50%;
  background-color:rgba(255,255,255,0.05);
  background-size:cover;
  background-position:center;
  border:2px solid rgba(255,255,255,0.25);
  cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
}
.item-picker-month-chip:hover{
  transform:translateY(-2px);
  border-color:var(--cyan);
}
.item-picker-month-chip.active{
  border-color:var(--warn);
  box-shadow:0 0 10px rgba(255,210,63,0.5);
}
.item-picker-month-chip-label{
  font-size:10.5px;
  font-weight:600;
  color:#e8dcc0;
  text-align:center;
  line-height:1.2;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.item-detail-box{
  max-width:360px;
}
.item-detail-art{
  width:140px;
  height:140px;
  margin:0 auto 16px;
  background-color:rgba(255,255,255,0.04);
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,210,63,0.4);
  border-radius:12px;
}
.item-detail-name{
  font-family:'Orbitron',sans-serif;
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin-bottom:8px;
}
.item-detail-category-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  margin-bottom:12px;
  border-radius:20px;
  border:1px solid rgba(255,210,63,0.5);
  background:rgba(255,210,63,0.08);
  color:var(--warn);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
}
.item-detail-desc{
  font-size:13px;
  color:#cfe8f2;
  line-height:1.5;
  margin-bottom:8px;
  /* 장비 설명이 이제 여러 줄로 나뉘어 있는 경우가 있음 (예: 무거운 가방) --
     card-detail-desc와 같은 이유로 줄바꿈 보존. */
  white-space:pre-line;
}

/* ---------- Bang! react popup ---------- */
.bang-react-box{
  max-width:380px;
  border-color:rgba(255,90,90,0.5);
  background:linear-gradient(180deg, rgba(255,90,90,0.1), rgba(255,255,255,0.02));
}
.bang-react-title{
  font-family:'Orbitron',sans-serif;
  font-size:17px;
  font-weight:700;
  color:#fff;
  margin-bottom:18px;
}
.bang-react-actions{
  flex-direction:column;
}
.bang-react-actions .btn{
  width:100%;
}

/* ---------- 뮤직홀 (이상현상) ---------- */
.music-hall-box{
  max-width:420px;
  border-color:rgba(63,242,255,0.5);
  background:linear-gradient(180deg, rgba(63,242,255,0.08), rgba(255,255,255,0.02));
  text-align:center;
}
.music-hall-intro-text{
  font-size:15px;
  color:var(--muted);
  margin-bottom:8px;
}
.music-hall-intro-countdown{
  font-family:'Orbitron',sans-serif;
  font-size:56px;
  font-weight:900;
  color:var(--cyan);
  text-shadow:0 0 18px rgba(63,242,255,0.6);
}
.music-hall-timer{
  font-family:'Orbitron',sans-serif;
  font-size:32px;
  font-weight:900;
  color:#fff;
  margin-bottom:10px;
}
.music-hall-choice-btn{
  min-width:150px;
}
.music-hall-waiting{
  font-size:14px;
  color:var(--muted);
  margin-top:6px;
}
.music-hall-reveal-banner{
  position:fixed;
  top:16px;
  left:50%;
  transform:translate(-50%, -140%);
  /* .modal-overlay(음악홀 퀴즈 팝업 포함)가 z-index:200이라, 정답 공개
     시점에 그 팝업이 아직 안 닫힌 순간과 겹치면(hold-back 지연 등) 예전
     z-index:60로는 팝업에 완전히 가려져서 배너가 떠도 안 보였다("맞았는지
     안 나옴" 리포트) -- draw-effect/anomaly-reveal급(255~260)보다도 위로
     올려서 무슨 팝업이 떠있든 항상 보이게 함. */
  z-index:270;
  padding:12px 22px;
  border-radius:8px;
  border:1px solid rgba(255,210,63,0.6);
  background:rgba(20,16,4,0.92);
  color:var(--warn);
  font-weight:700;
  font-size:15px;
  box-shadow:0 0 20px rgba(255,210,63,0.35);
  pointer-events:none;
  transition:transform .3s ease, opacity .3s ease;
  opacity:0;
}
.music-hall-reveal-banner.show{
  transform:translate(-50%, 0);
  opacity:1;
}
.music-hall-reveal-banner.wrong{
  border-color:rgba(255,95,126,0.6);
  color:var(--danger);
  box-shadow:0 0 20px rgba(255,95,126,0.35);
}

/* ---------- 승민 [롤대남] / 현호 [에픽빔] start-of-turn draw choice ---------- */
.seungmin-choice-box{
  max-width:380px;
}
.seungmin-streak{
  font-size:22px;
  font-weight:900;
  font-family:'Orbitron',sans-serif;
  margin-bottom:16px;
}
.seungmin-streak.win{ color:#4ade80; }
.seungmin-streak.lose{ color:var(--danger); }
.seungmin-streak.even{ color:#8fb6c9; }

/* ---------- Seat detail (level 1 of the seat inspection popup) ---------- */
.seat-detail-box .field-label{
  margin-top:16px;
  margin-bottom:8px;
}
.seat-detail-portrait{
  width:120px;
  height:168px;
  margin:0 auto 12px;
  border-radius:10px;
  background-color:rgba(255,255,255,0.05);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  border:1px solid rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  cursor:pointer;
}
.seat-detail-name{
  font-family:'Orbitron',sans-serif;
  font-size:18px;
  font-weight:900;
  color:#fff;
}
.seat-detail-role{
  font-size:12px;
  color:var(--cyan-dim);
  margin-top:4px;
}
.seat-detail-hangwon{
  font-size:12px;
  color:var(--warn);
  margin-top:6px;
  font-weight:700;
}
.seat-detail-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.seat-detail-empty{
  font-size:12.5px;
  color:#6f95a5;
}

/* ---------- Game-end overlay ---------- */
.game-end-box{
  max-width:460px;
}
.game-end-title{
  font-family:'Orbitron',sans-serif;
  font-size:24px;
  font-weight:900;
  color:#fff;
  margin-bottom:18px;
}
.game-end-title.win{
  color:#4a90e2;
  text-shadow:0 0 20px rgba(74,144,226,0.7);
}
.game-end-title.lose{
  color:var(--danger);
  text-shadow:0 0 20px rgba(255,95,126,0.7);
}
.game-end-results{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:18px;
  text-align:left;
}
.game-end-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:6px;
}
.game-end-row.me{
  border-color:rgba(63,242,255,0.5);
}
.game-end-who{
  font-size:13.5px;
  color:#fff;
}
.game-end-who .game-end-role{
  color:#9fc4d6;
  font-size:12px;
  margin-left:6px;
}
.game-end-tag{
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  padding:4px 10px;
  border-radius:4px;
  flex-shrink:0;
}
.game-end-tag.win{
  color:#4a90e2;
  border:1px solid rgba(74,144,226,0.6);
  background:rgba(74,144,226,0.12);
}
.game-end-tag.lose{
  color:var(--danger);
  border:1px solid rgba(255,95,126,0.6);
  background:rgba(255,95,126,0.12);
}

.card-detail-name{
  font-family:'Orbitron',sans-serif;
  font-size:22px;
  font-weight:900;
  color:#fff;
  margin-bottom:6px;
}
.card-detail-type{
  font-size:11px;
  letter-spacing:.1em;
  color:var(--cyan-dim);
  margin-bottom:16px;
}
.card-detail-desc{
  font-size:14px;
  line-height:1.7;
  color:#cfe8f2;
  margin-bottom:16px;
  /* Character ability text is [능력 이름] on its own line, then the
     description -- preserve that instead of collapsing it into one line
     like normal text-flow whitespace. Doesn't affect regular card
     descriptions (bang/beer/etc.), which just don't contain \n. */
  white-space:pre-line;
}
/* formatAbilityDesc()가 캐릭터 능력 설명을 줄당 <div> 하나씩(제목 1개 +
   불릿 N개)으로 만들어서 .card-detail-desc/.my-character-card-desc 양쪽에
   똑같이 꽂힘 -- character-abilities-draft.md의 "●" 불릿을 실제 게임 화면
   에서도 그대로 살려서 3~4줄짜리 능력이 벽처럼 안 보이게. */
.ability-desc-title{
  font-weight:900;
  color:#fff;
  margin-bottom:6px;
}
.ability-desc-line{
  position:relative;
  padding-left:14px;
}
.ability-desc-line + .ability-desc-line{
  margin-top:4px;
}
.ability-desc-line::before{
  content:'•';
  position:absolute;
  left:0;
  color:var(--cyan-dim);
}
.card-detail-range-img{
  display:block;
  max-width:160px;
  max-height:40px;
  margin:0 auto 16px;
}
.card-detail-range-img.hidden{
  display:none;
}
.card-detail-unusable{
  font-size:13px;
  color:#ff8fa3;
  margin-bottom:16px;
}
.card-detail-actions{
  justify-content:center;
}

#endTurnBtn{
  display:block;
  width:100%;
  margin-top:8px;
}

.leave-btn{
  width:100%;
  margin-top:14px;
}

/* ---------- Broadcast log ---------- */
.broadcast-panel{
  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;
}
/* Sound volume control -- same pattern/markup as mafia's (content/mafia
   CLAUDE.md): one toggle+slider pair for one-shot SFX, a second pair for the
   looping BGM track. */
.broadcast-panel-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.sound-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.sound-toggle-btn{
  border:1px solid rgba(63,242,255,0.3);
  background:rgba(255,255,255,0.02);
  border-radius:6px;
  width:26px;
  height:26px;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition:all .15s ease;
}
.sound-toggle-btn:hover{
  border-color:var(--cyan);
}
.sound-toggle-btn.muted{
  opacity:.5;
}
.sound-volume-slider{
  width:52px;
  accent-color:var(--cyan);
  cursor:pointer;
}
.broadcast-log{
  max-height:520px;
  overflow-y:auto;
  display:flex;
  flex-direction:column-reverse;
  gap:7px;
  margin-top:12px;
  padding:12px;
  background:rgba(0,0,0,0.3);
  border-radius:4px;
}
.broadcast-line{
  font-size:13px;
  line-height:1.6;
  color:#9fc4d6;
  padding-bottom:6px;
  border-bottom:1px dashed rgba(63,242,255,0.1);
}
.broadcast-line:first-child{
  border-bottom:none;
  padding-bottom:0;
}
/* 로그 문장 안에서 카드 이름 부분만 카테고리별로 색을 다르게 (줄 전체는
   그대로) -- highlightCardNamesInLog()가 <span class="log-card-name
   log-card-<category>">로 감싼 부분만 해당됨. */
.log-card-name{
  font-weight:700;
}
.log-card-attack{ color:var(--danger); }
.log-card-defense{ color:#4d9fff; }
.log-card-disrupt{ color:var(--magenta); }
.log-card-draw{ color:var(--warn); }
.log-card-weapon{ color:#e0a35c; }
.log-card-gear{ color:var(--success); }
.log-card-special{ color:var(--cyan); }

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

/* ---------- 내 패 보기 (다른 모달 위에 겹쳐서 열림) ---------- */
.peek-hand-btn{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:270;
  padding:10px 16px;
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  letter-spacing:.1em;
  color:#04141a;
  background:var(--warn);
  border:none;
  border-radius:6px;
  cursor:pointer;
  box-shadow:0 0 20px rgba(255,210,63,0.5);
  transition:transform .15s ease, box-shadow .15s ease;
}
.peek-hand-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 28px rgba(255,210,63,0.7);
}
/* 다른 .modal-overlay(z-index:200)나 리빌 연출(최대 260)보다도 위에 뜨게
   -- 잡화점/타겟 픽커/뱅 반응 팝업 등 뭐가 열려있든 그 위에 겹쳐서 내 패를
   볼 수 있어야 함. */
.peek-hand-overlay{
  z-index:400;
}
.peek-hand-overlay .hand-card{
  cursor:default;
}
.peek-hand-overlay .hand-card:hover{
  transform:none;
  box-shadow:none;
}

/* ---------- MY TURN flash ---------- */
.turn-flash{
  position:fixed;
  inset:0;
  z-index:250;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(2,3,8,0.7);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.turn-flash.show{
  opacity:1;
}
.turn-flash-title{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:clamp(32px,9vw,58px);
  letter-spacing:.15em;
  color:var(--warn);
  text-shadow:0 0 26px rgba(255,210,63,0.8), 0 0 55px rgba(255,210,63,0.4);
  transform:scale(.85);
  transition:transform .3s cubic-bezier(.2,1.5,.4,1);
}
.turn-flash.show .turn-flash-title{
  transform:scale(1);
}

/* ---------- Character reveal (once per fresh game) ---------- */
.character-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;
  overflow-y:auto;
}
.character-reveal-overlay.show{
  opacity:1;
  pointer-events:auto;
}
.character-reveal-inner{
  transform:scale(.85) translateY(10px);
  transition:transform .55s cubic-bezier(.2,1.5,.4,1);
}
.character-reveal-overlay.show .character-reveal-inner{
  transform:scale(1) translateY(0);
}
.character-reveal-img{
  display:block;
  max-width:min(80vw, 420px);
  max-height:56vh;
  margin:0 auto 26px;
  border-radius:14px;
  box-shadow:0 0 60px rgba(63,242,255,0.4);
}
.character-reveal-name{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:clamp(28px,6vw,44px);
  letter-spacing:.06em;
  color:#fff;
  text-shadow:0 0 24px rgba(63,242,255,0.7);
}

/* ---------- Anomaly reveal (이상현상, once per fresh game) ----------
   Same show/hide mechanics as .character-reveal-overlay, an amber/orange
   accent instead of cyan so the two don't read as the same event even
   though they're shown back-to-back. */
.anomaly-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;
  overflow-y:auto;
}
.anomaly-reveal-overlay.show{
  opacity:1;
  pointer-events:auto;
}
/* Rounded card, split top/bottom: top half is the 2:1 landscape logo image
   (anomaly-art/<key>.png -- recommended source size 800x400), bottom half
   is name + description. object-fit:cover on the image + a fixed
   aspect-ratio wrapper means the card's shape stays consistent even if a
   given source image isn't exactly 2:1. */
.anomaly-reveal-card{
  width:min(90vw, 420px);
  border-radius:20px;
  overflow:hidden;
  background:#12131a;
  box-shadow:0 0 60px rgba(255,150,50,0.35);
  transform:scale(.85) translateY(10px);
  transition:transform .55s cubic-bezier(.2,1.5,.4,1);
}
.anomaly-reveal-overlay.show .anomaly-reveal-card{
  transform:scale(1) translateY(0);
}
.anomaly-reveal-image-wrap{
  width:100%;
  aspect-ratio:2/1;
  background:#000;
  overflow:hidden;
}
.anomaly-reveal-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.anomaly-reveal-img.hidden{
  display:none;
}
.anomaly-reveal-text{
  padding:20px 24px 26px;
  text-align:center;
}
.anomaly-reveal-name{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:clamp(24px,5vw,34px);
  letter-spacing:.06em;
  color:#ffb84d;
  text-shadow:0 0 24px rgba(255,150,50,0.6);
  margin-bottom:12px;
}
.anomaly-reveal-desc{
  font-size:clamp(14px,2.4vw,16px);
  line-height:1.6;
  color:#eee;
  white-space:pre-line;
}
.anomaly-reveal-hint{
  margin-top:14px;
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(255,255,255,0.35);
}

/* ---------- Draw effect (Jail/Dynamite/Barrel suit check) ----------
   Same show/hide mechanics as .character-reveal-overlay (opacity + pointer-
   events, no manual close -- it just times out), shown to every viewer since
   the drawn suit is public info. */
.draw-effect-overlay{
  position:fixed;
  inset:0;
  z-index:255;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  text-align:center;
  background:rgba(2,3,8,0.9);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.draw-effect-overlay.show{
  opacity:1;
  pointer-events:auto;
}
.draw-effect-inner{
  transform:scale(.85);
  transition:transform .45s cubic-bezier(.2,1.5,.4,1);
}
.draw-effect-overlay.show .draw-effect-inner{
  transform:scale(1);
}
.draw-effect-label{
  font-family:'Orbitron',sans-serif;
  font-size:15px;
  letter-spacing:.05em;
  color:var(--cyan-dim);
  margin-bottom:16px;
}
.draw-effect-art{
  width:150px;
  height:150px;
  margin:0 auto 16px;
  border-radius:14px;
  background-color:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 0 50px rgba(63,242,255,0.35);
  /* showDrawEffect()가 매번 이 안에 .draw-effect-reel-strip을 새로 넣고
     슬라이드시키는 "창" 역할 -- 띠가 창 밖으로 나가는 부분은 가려져야
     함(overflow:hidden), position:relative는 그 자식(absolute)의 기준점. */
  overflow:hidden;
  position:relative;
}
.draw-effect-reel-strip{
  display:flex;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  will-change:transform;
}
.draw-effect-reel-cell{
  width:150px;
  height:150px;
  flex:0 0 150px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  font-size:48px;
  font-weight:900;
  color:#fff;
}
.draw-effect-result{
  font-family:'Orbitron',sans-serif;
  font-size:20px;
  font-weight:900;
  color:#fff;
  text-shadow:0 0 16px rgba(63,242,255,0.6);
}

/* ---------- 랜덤박스 roulette ----------
   Same show/hide mechanics as .draw-effect-overlay (opacity + pointer-
   events, no manual close), a purple/gold accent to read as its own event.
   The 4 suit boxes cycle an .active highlight via showRandomBoxRoulette()
   in script.js -- pure CSS/JS, no image assets needed. */
.randombox-overlay{
  position:fixed;
  inset:0;
  z-index:255;
  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 .4s ease;
}
.randombox-overlay.show{
  opacity:1;
  pointer-events:auto;
}
.randombox-inner{
  transform:scale(.85);
  transition:transform .45s cubic-bezier(.2,1.5,.4,1);
}
.randombox-overlay.show .randombox-inner{
  transform:scale(1);
}
.randombox-title{
  font-family:'Orbitron',sans-serif;
  font-size:17px;
  letter-spacing:.05em;
  color:#d9a9ff;
  margin-bottom:22px;
}
.randombox-suits{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-bottom:22px;
}
.randombox-suit{
  width:70px;
  height:90px;
  border-radius:10px;
  background-color:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
  font-weight:900;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.randombox-suit.red{ color:#ff5f7e; }
.randombox-suit.black{ color:#e8e8f0; }
.randombox-suit.active{
  transform:scale(1.15);
  border-color:#b96bff;
  box-shadow:0 0 30px rgba(185,107,255,0.7);
}
.randombox-result{
  font-family:'Orbitron',sans-serif;
  font-size:17px;
  font-weight:900;
  color:#fff;
  text-shadow:0 0 16px rgba(185,107,255,0.7);
  max-width:380px;
  line-height:1.6;
}
.randombox-result.hidden{
  display:none;
}

/* ---------- Card deal-in animation ----------
   Applied briefly to newly-drawn hand cards only (script.js diffs the
   previous hand's card ids against the new one), not the whole row on
   every render -- otherwise it'd replay on every 1.5s poll. Bigger drop +
   overshoot pop + a gold glow pulse so it reads clearly as "a card just
   arrived", not just a quiet fade. */
@keyframes bangCardDealIn{
  0%{ opacity:0; transform:translateY(-60px) scale(.7) rotate(-6deg); box-shadow:0 0 0 rgba(255,210,63,0); }
  55%{ opacity:1; transform:translateY(6px) scale(1.08) rotate(2deg); box-shadow:0 0 22px rgba(255,210,63,0.85); }
  75%{ transform:translateY(-2px) scale(.98) rotate(-1deg); }
  100%{ opacity:1; transform:translateY(0) scale(1) rotate(0); box-shadow:0 0 0 rgba(255,210,63,0); }
}
.hand-card.deal-in{
  animation:bangCardDealIn .6s cubic-bezier(.2,.9,.3,1.2);
}

/* "+N장" badge that pops up next to 내 패 whenever new cards land in hand
   (draw phase, Wells Fargo, General Store pick, etc. -- anything that
   changes myHand's id set triggers it, same diff justDrawn already uses
   for .deal-in). Shown briefly then faded via a JS timeout, not CSS
   animation-fill alone, since it needs to re-trigger on repeated draws. */
@keyframes bangHandGainPop{
  0%{ opacity:0; transform:translate(2px,4px) scale(.6); }
  25%{ opacity:1; transform:translate(2px,-2px) scale(1.15); }
  40%{ transform:translate(2px,0) scale(1); }
  80%{ opacity:1; }
  100%{ opacity:0; transform:translate(2px,-10px) scale(1); }
}
.my-hand-gain-badge{
  display:inline-block;
  margin-left:6px;
  padding:1px 7px;
  border-radius:10px;
  font-size:11.5px;
  font-weight:800;
  color:#2a1a02;
  background:var(--warn);
  box-shadow:0 0 10px rgba(255,210,63,0.65);
  vertical-align:middle;
}
.my-hand-gain-badge.pop{
  animation:bangHandGainPop 1.4s ease-out forwards;
}