/* 오목 한판 — 낮 대국(light) / 밤 대국(dark)
   바탕은 차가운 청자빛, 판만 따뜻한 나뭇결. 화면에서 온기가 있는 것은 판 하나뿐이다. */

:root{
  --bg:        #E1E7E3;
  --bg-deep:   #D3DBD6;
  --surface:   #F3F6F3;
  --surface-2: #E8EDE9;
  --line:      #C4CEC8;
  --text:      #16211D;
  --text-dim:  #5D6C65;
  --text-mute: #8A968F;
  --accent:    #1F6E63;
  --accent-in: #FFFFFF;
  --accent-soft:#CCE0DA;
  --warn:      #A8422C;
  --gold:      #A67A22;
  --ok:        #2E7D4F;
  --wood-1:    #E0BC80;
  --wood-2:    #C79B57;
  --wood-line: #6B4A1E;
  --grain:     rgba(94,62,20,.14);
  --board-shadow: 0 18px 44px -18px rgba(40,30,10,.55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:        #0E1513;
    --bg-deep:   #080D0C;
    --surface:   #18221F;
    --surface-2: #202C28;
    --line:      #2C3A35;
    --text:      #E4EDE8;
    --text-dim:  #91A59D;
    --text-mute: #677971;
    --accent:    #52C3AE;
    --accent-in: #06211D;
    --accent-soft:#1D3A35;
    --warn:      #E07A62;
    --gold:      #D9AE52;
    --ok:        #5FC98A;
    --wood-1:    #91663A;
    --wood-2:    #74512C;
    --wood-line: #33210E;
    --grain:     rgba(20,10,0,.20);
    --board-shadow: 0 20px 50px -20px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1513; --bg-deep:#080D0C; --surface:#18221F; --surface-2:#202C28;
  --line:#2C3A35; --text:#E4EDE8; --text-dim:#91A59D; --text-mute:#677971;
  --accent:#52C3AE; --accent-in:#06211D; --accent-soft:#1D3A35;
  --warn:#E07A62; --gold:#D9AE52; --ok:#5FC98A;
  --wood-1:#91663A; --wood-2:#74512C; --wood-line:#33210E;
  --grain:rgba(20,10,0,.20);
  --board-shadow:0 20px 50px -20px rgba(0,0,0,.85);
}

*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }
/* 화면 크기 — 글자도 단추도 판도 함께 키운다.
   zoom 을 쓰면 px 로 적어둔 것까지 한 번에 따라오지만, 100vh 는 확대 전
   길이라 그대로 두면 화면 밖으로 넘친다. 그래서 배율로 나눠준다.
   배드민턴은 예외다 — 캔버스 크기를 잰 값으로 다시 그리는데, 확대된
   값을 그대로 쓰면 배율이 두 번 곱해진다. */
:root{ --ui:1 }
body{ zoom:var(--ui) }
body.bd-full{ zoom:1 }
body{
  background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans KR','Malgun Gothic',system-ui,sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden; overscroll-behavior:none;
}
button{ font:inherit; color:inherit }
[hidden]{ display:none !important }

.screen{
  height:calc(100vh / var(--ui)); height:calc(100dvh / var(--ui));
  max-width:560px; margin:0 auto;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));
  display:grid; gap:10px;
}

/* ── 공통 부품 ───────────────────────────────────────────── */
.brand{ display:flex; align-items:center; gap:8px }

/* 젖소냥이가 한 수 놓는 중 */
.logo{ width:38px; height:35px; flex:none }
.logo .brd  { fill:#C79B57; stroke:#8A6A38; stroke-width:.8 }
.logo .grid { fill:none; stroke:#6B4A1E; stroke-width:.7; opacity:.6 }
.logo .st-b { fill:#1B1D20; stroke:#8A8F94; stroke-width:.5 }
.logo .st-w { fill:#F7F4EC; stroke:#9A9488; stroke-width:.5 }
.logo .fur  { fill:#F6F3EB; stroke:#8A8F94; stroke-width:.8 }
.logo .spot { fill:#23262A }
.logo .ink  { fill:none; stroke:#23262A; stroke-width:1.2; stroke-linecap:round }
.logo .ink.thin{ stroke-width:.8; opacity:.65 }
.logo .nose { fill:#C4705E }
.logo .paw  { stroke-width:.7 }
.brand h1{
  font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-weight:700; font-size:23px; line-height:1; margin:0; letter-spacing:.06em;
}
.brand .eyebrow{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-mute); font-weight:600;
}
.brand .spacer{ flex:1 }

.net{
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--text-mute); font-weight:500; letter-spacing:.02em;
}
.net .dot{ width:7px; height:7px; border-radius:50%; background:var(--text-mute) }
.net[data-s="on"] .dot{ background:var(--ok) }
.net[data-s="off"] .dot{ background:var(--warn) }
.net[data-s="try"] .dot{ background:var(--gold); animation:blink 1s infinite }
@keyframes blink{ 50%{ opacity:.25 } }

.btn{
  border:1px solid var(--line); border-radius:11px;
  background:var(--surface); color:var(--text);
  font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  padding:10px 16px; cursor:pointer; white-space:nowrap;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.btn:disabled{ opacity:.42; cursor:default }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-in) }
.btn.ghost{ background:transparent; color:var(--text-dim); font-weight:500 }
.btn.danger{ color:var(--warn) }
.btn[data-armed="1"]{ background:var(--warn); border-color:var(--warn); color:#fff }
.btn.wide{ width:100% }

.field{
  width:100%; border:1px solid var(--line); border-radius:11px;
  background:var(--surface); color:var(--text);
  font:inherit; font-size:14px; padding:10px 13px;
}
.field:focus{ outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent) }
.field::placeholder{ color:var(--text-mute) }

.label{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-mute); font-weight:600; margin:0 0 6px;
}

.seg{
  display:flex; flex:1; gap:3px; padding:3px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:11px;
}
.seg button{
  flex:1; border:0; border-radius:8px; padding:8px 4px; background:transparent;
  color:var(--text-dim); font-size:13px; font-weight:500; cursor:pointer;
  transition:background .14s ease, color .14s ease;
}
.seg button[aria-checked="true"]{
  background:var(--surface); color:var(--text); font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}
.seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }

.toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,14px);
  background:var(--warn); color:#fff; font-size:13px; font-weight:500;
  padding:9px 16px; border-radius:999px; opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; z-index:50;
  max-width:88vw; text-align:center;
}
.toast.on{ opacity:1; transform:translate(-50%,0) }
.toast.ok{ background:var(--accent); color:var(--accent-in) }

/* ── 관리자 공지 ──────────────────────────────────────────
   토스트와 달리 저절로 사라지지 않는다. 몇 초 만에 없어지면 읽기도 전에
   놓치고, 관리자는 전한 줄 알지만 아무도 못 본 상태가 된다.
   배드민턴 전체화면 위에도 떠야 하므로 z-index 를 그보다 높게 둔다. */
.notice{
  position:fixed; z-index:60;
  left:10px; right:10px; top:calc(10px + env(safe-area-inset-top,0px));
  margin:0 auto; max-width:520px;
  display:flex; align-items:flex-start; gap:9px;
  padding:11px 12px;
  background:var(--accent); color:var(--accent-in);
  border-radius:13px; box-shadow:0 14px 34px -14px rgba(0,0,0,.55);
  animation:notice-in .24s cubic-bezier(.2,.9,.3,1.1) both;
}
.notice .tag{
  flex:none; font-size:10px; font-weight:700; letter-spacing:.14em;
  border:1px solid currentColor; border-radius:999px; padding:2px 7px;
  opacity:.75; margin-top:1px;
}
.notice .msg{
  flex:1; min-width:0; font-size:13.5px; line-height:1.5; font-weight:500;
  word-break:break-word; white-space:pre-wrap;
}
.notice .x{
  flex:none; border:0; background:transparent; color:inherit;
  font-size:14px; line-height:1; padding:2px 2px 2px 4px; cursor:pointer;
  opacity:.7; border-radius:6px;
}
.notice .x:hover{ opacity:1 }
.notice .x:focus-visible{ outline:2px solid currentColor; outline-offset:2px }
@keyframes notice-in{
  from{ opacity:0; transform:translateY(-12px) }
  to{ opacity:1; transform:none }
}

/* ── 게임 탭 ─────────────────────────────────────────────── */
.tabs{
  display:flex; gap:4px; padding:4px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
}
.tab{
  flex:1; min-width:0; border:0; border-radius:9px; padding:9px 4px;
  background:transparent; color:var(--text-dim);
  font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap;
  display:flex; align-items:center; justify-content:center; gap:5px;
  transition:background .14s ease, color .14s ease;
}
.tab .ico{ font-size:13px; line-height:1; opacity:.8 }
.tab[aria-selected="true"]{
  background:var(--surface); color:var(--text); font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}
.tab[aria-selected="true"] .ico{ color:var(--accent); opacity:1 }
.tab[data-soon="1"]{ opacity:.55 }
.tab:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }
@media (max-width:360px){
  .tab{ font-size:11.5px; gap:3px; padding:9px 2px }
}

.soon-note{
  display:grid; gap:8px; place-items:center; text-align:center;
  padding:30px 14px; color:var(--text-mute);
}
.soon-note .big{
  font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-size:34px; line-height:1; color:var(--text-dim);
}
.soon-note .t{ font-size:13.5px; font-weight:600; color:var(--text-dim) }
.soon-note .d{ font-size:12px; line-height:1.6 }

/* ── 로비 ────────────────────────────────────────────────── */
#lobby{ grid-template-rows:auto auto auto auto auto 1fr auto }

.lobby-name{ display:flex; gap:8px }
.lobby-name .field{ flex:1 }

.lobby-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px }

.join-row{ display:flex; gap:8px }
.join-row .field{
  flex:1; font-family:'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.32em; text-transform:uppercase; font-size:16px; text-align:center;
}

.rooms{ min-height:0; display:grid; grid-template-rows:auto 1fr; gap:6px }
.rooms-head{ display:flex; align-items:baseline; gap:8px }
.rooms-head .label{ margin:0 }
.rooms-head .count{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px;
  color:var(--text-mute); font-variant-numeric:tabular-nums;
}
.rooms-list{
  overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:6px; padding-right:2px;
  min-height:128px;
}
.room-card{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:11px 13px; cursor:pointer;
  transition:border-color .14s ease, background .14s ease;
}
.room-card:hover{ border-color:var(--accent) }
.room-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.room-card .code{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500;
  font-size:15px; letter-spacing:.14em; color:var(--accent);
  background:var(--accent-soft); padding:5px 9px; border-radius:8px; flex:none;
}
.room-card .meta{ min-width:0; flex:1; display:grid }
.room-card .title{
  font-weight:600; font-size:14px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.room-card .sub{ font-size:11.5px; color:var(--text-mute) }
.room-card .state{
  font-size:11px; font-weight:600; letter-spacing:.04em; flex:none;
  padding:4px 9px; border-radius:999px;
  background:var(--surface-2); color:var(--text-dim);
}
.room-card .state[data-play="1"]{ background:var(--accent-soft); color:var(--accent) }
.empty-note{
  color:var(--text-mute); font-size:13px; text-align:center;
  padding:26px 10px; line-height:1.7;
}

/* 지금 누가 와 있는지 */
.online-panel{
  display:grid; gap:6px;
  border-top:1px solid var(--line); padding-top:9px;
}
.names{
  display:flex; flex-wrap:wrap; gap:5px;
  max-height:92px; overflow-y:auto; overscroll-behavior:contain;
}
.name-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:500; line-height:1;
  padding:5px 9px; border-radius:999px;
  background:var(--surface-2); color:var(--text-dim);
  border:1px solid transparent; max-width:100%;
}
.name-chip[data-in="1"]{ background:var(--accent-soft); color:var(--accent) }
.name-chip[data-me="1"]{ border-color:var(--gold); color:var(--text); font-weight:600 }
button.name-chip{ cursor:pointer; font-family:inherit }
button.name-chip:hover{ border-color:var(--accent); color:var(--accent) }
button.name-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
button.name-chip[data-armed="1"]{
  background:var(--accent); color:var(--accent-in);
  border-color:var(--accent); font-weight:600;
}
.name-chip .rm{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.1em; opacity:.75;
}
.name-chip.empty{ background:transparent; color:var(--text-mute) }
/* 신청을 받지 않는 사람 — 눌리지 않고, 이름에 옅은 선을 긋는다 */
.name-chip[data-dnd="1"]{ opacity:.5 }
.name-chip[data-dnd="1"]::after{
  content:'신청 안 받음'; font-size:9.5px; letter-spacing:.02em;
  padding:2px 5px; border-radius:999px;
  background:var(--bg-deep); color:var(--text-mute);
}

/* 눌러도 되는 줄 모르면 아무도 안 누른다 */
.tip{
  margin:1px 0 0; font-size:11.5px; line-height:1.5; color:var(--text-mute);
  display:flex; align-items:center; gap:6px;
}
.tip::before{
  content:''; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--accent);
  animation:tip-pulse 2.6s ease-in-out infinite;
}
.tip b{ color:var(--accent); font-weight:600 }
@keyframes tip-pulse{ 0%,70%,100%{ opacity:1 } 85%{ opacity:.25 } }

/* ── 대국 화면 ───────────────────────────────────────────── */
#game{ grid-template-rows:auto auto auto 1fr auto auto }

.topbar{ display:flex; align-items:center; gap:9px }
.topbar .room-id{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:13px; letter-spacing:.14em; color:var(--accent); font-weight:500;
}
.topbar .room-title{
  font-size:13px; color:var(--text-dim); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar .spacer{ flex:1 }

.seats{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.seat{
  display:flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:9px 11px; min-width:0;
  transition:border-color .16s ease, background .16s ease;
}
.seat[data-turn="1"]{ border-color:var(--accent); background:var(--accent-soft) }
.seat .who{ min-width:0; flex:1; display:grid }
.seat .who .nm{
  font-size:13px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.seat .who .rk{ font-size:10.5px; color:var(--text-mute); letter-spacing:.06em }
.seat .who .rk[data-off="1"]{ color:var(--warn) }
.seat .sit-btn{
  border:1px dashed var(--line); background:transparent; color:var(--accent);
  border-radius:9px; padding:5px 10px; font-size:12px; font-weight:600; cursor:pointer;
}
.seat .sit-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }

.chip{ width:19px; height:19px; border-radius:50%; flex:none; box-shadow:0 1px 2px rgba(0,0,0,.35) }
.chip[data-s="1"]{ background:radial-gradient(circle at 33% 30%, #6d7174, #26292b 48%, #08090a) }
.chip[data-s="2"]{ background:radial-gradient(circle at 33% 30%, #fff, #f0ece2 52%, #c5bead) }

.status{
  display:flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:8px 12px;
}
.status.thinking .chip{ animation:breathe 1.1s ease-in-out infinite }
@keyframes breathe{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.45; transform:scale(.86) } }
.status .txt{ font-weight:500; letter-spacing:-.01em; font-size:13.5px }
.status .txt b{ font-weight:600 }
.status .watch{
  margin-left:auto; flex:none;
  font-size:10.5px; font-weight:600; letter-spacing:.04em;
  padding:3px 8px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent);
}
.status .watch + .count{ margin-left:8px }
.status .count{
  margin-left:auto; font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12.5px; color:var(--text-mute); font-variant-numeric:tabular-nums;
}

.board-wrap{ position:relative; min-height:0; display:grid; place-items:center }
#board{
  display:block; border-radius:9px; box-shadow:var(--board-shadow);
  /* none 이어야 한다. manipulation 이면 손가락으로 끌 때 브라우저가 그 동작을
     화면 넘기기로 가로채고, pointercancel 이 떠서 조준이 사라진다.
     페이지 자체가 스크롤되지 않으므로 잃는 것도 없다. */
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
  cursor:pointer;
}
#board:focus-visible{ outline:3px solid var(--accent); outline-offset:3px }

.hint{
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  font-size:11.5px; letter-spacing:.05em; font-weight:500;
  color:var(--accent-in); background:var(--accent);
  padding:4px 11px; border-radius:999px; white-space:nowrap;
  opacity:0; transition:opacity .16s ease; pointer-events:none;
}
.hint.on{ opacity:1 }

.over{ position:absolute; inset:0; display:none; place-items:center; padding:18px }
.over.on{ display:grid }
.over-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:20px 24px; text-align:center;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6);
  animation:rise .26s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(10px) scale(.96) } }
.over-card .verdict{
  font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-size:38px; line-height:1; font-weight:700; letter-spacing:.1em; margin:0 0 6px;
}
.over-card[data-r="win"] .verdict{ color:var(--accent) }
.over-card[data-r="lose"] .verdict{ color:var(--warn) }
.over-card[data-r="draw"] .verdict,
.over-card[data-r="watch"] .verdict{ color:var(--text-dim) }
.over-card .detail{ font-size:12.5px; color:var(--text-dim); margin:0 0 15px }

.actions{ display:flex; gap:8px }
.actions .btn{ flex:1 }

.actions-solo{ display:grid; gap:8px }
.actions-solo .row{ display:flex; gap:8px }

/* ── 채팅 ────────────────────────────────────────────────── */
.chat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; overflow:hidden;
  display:grid; grid-template-rows:auto auto;
}
.chat-toggle{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:transparent; border:0; border-bottom:1px solid transparent;
  padding:8px 12px; cursor:pointer; min-width:0;
}
.chat-toggle .peek{
  flex:1; min-width:0; font-size:12.5px; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-toggle .caret{ color:var(--text-mute); font-size:11px; flex:none; transition:transform .18s ease }
.chat-toggle .badge{
  flex:none; background:var(--accent); color:var(--accent-in);
  font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.chat.open .chat-toggle{ border-bottom-color:var(--line) }
.chat.open .chat-toggle .caret{ transform:rotate(180deg) }

.chat-log{
  display:none; overflow-y:auto; overscroll-behavior:contain;
  height:32vh; padding:9px 12px;
  flex-direction:column; gap:5px;
}
.chat.open .chat-log{ display:flex }
.chat-line{ font-size:13px; line-height:1.45; word-break:break-word }
.chat-line .nm{ font-weight:600; color:var(--accent); margin-right:5px }
.chat-line[data-k="sys"]{ color:var(--text-mute); font-size:12px; font-style:normal }
.chat-line[data-k="me"] .nm{ color:var(--gold) }

.chat-form{ display:flex; gap:6px; padding:8px; border-top:1px solid var(--line) }
.chat-form .field{ flex:1; border-radius:9px; padding:8px 11px; font-size:13.5px }
.chat-form .btn{ padding:8px 14px; border-radius:9px }

/* ── 작은 보조 버튼 ──────────────────────────────────────── */
.mini{
  border:1px solid var(--line); background:transparent; color:var(--text-mute);
  font-size:11px; font-weight:600; letter-spacing:.04em;
  padding:3px 9px; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:color .14s ease, border-color .14s ease, background .14s ease;
}
.mini:hover{ color:var(--accent); border-color:var(--accent) }
.mini:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.mini[aria-pressed="false"]{ color:var(--text-mute); opacity:.55; text-decoration:line-through }
.mini[data-on="1"]{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft) }

/* 환경설정의 게이지 */
.range{
  width:100%; margin:0; height:22px;
  accent-color:var(--accent); background:transparent; cursor:pointer;
}
.range:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px }
.range:disabled{ opacity:.35; cursor:default }

.set-row{ display:grid; gap:6px }
.set-head{ display:flex; align-items:center; gap:8px }
.set-head .label{ margin:0; flex:1 }
.set-note{ margin:0; font-size:11.5px; color:var(--text-mute); line-height:1.5 }

/* 넘칠 때 스크롤이 있다는 걸 눈에 보이게 */
.rooms-list, .names, .chat-log, .admin-rooms, .modal-card{
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.rooms-list::-webkit-scrollbar,
.names::-webkit-scrollbar,
.chat-log::-webkit-scrollbar,
.admin-rooms::-webkit-scrollbar,
.modal-card::-webkit-scrollbar{ width:9px }
.rooms-list::-webkit-scrollbar-track,
.names::-webkit-scrollbar-track,
.chat-log::-webkit-scrollbar-track,
.admin-rooms::-webkit-scrollbar-track,
.modal-card::-webkit-scrollbar-track{ background:transparent }
.rooms-list::-webkit-scrollbar-thumb,
.names::-webkit-scrollbar-thumb,
.chat-log::-webkit-scrollbar-thumb,
.admin-rooms::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb{
  background:var(--line); border-radius:5px;
  border:2px solid transparent; background-clip:content-box;
}
.rooms-list::-webkit-scrollbar-thumb:hover,
.names::-webkit-scrollbar-thumb:hover{ background:var(--accent); background-clip:content-box }

/* 1:1 신청 팝업 */
.invite-card{ text-align:center; max-width:340px; gap:6px }
.invite-eyebrow{
  margin:0; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-mute); font-weight:600;
}
.invite-who{
  margin:2px 0 0; font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-size:19px; line-height:1.5;
}
.invite-who b{ color:var(--accent); font-weight:700 }
.invite-timer{
  margin:0 0 6px; font-size:12px; color:var(--text-mute);
  font-variant-numeric:tabular-nums;
}
.invite-actions{ display:flex; gap:8px }
.invite-actions .btn{ flex:1 }

/* 암호 입력 */
.pw-form{ display:grid; gap:9px }
.pw-form .field{ text-align:center; letter-spacing:.18em; font-size:16px }

/* 잠긴 방 */
.room-card .lock{
  flex:none; font-size:11px; font-weight:600; letter-spacing:.02em;
  padding:4px 8px; border-radius:999px;
  background:var(--surface-2); color:var(--text-mute);
}

/* 신청 받을 게임 고르기 */
.checks{ display:flex; gap:6px }
.check{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line); border-radius:11px;
  background:var(--surface-2); padding:9px 4px;
  font-size:13px; color:var(--text-dim); cursor:pointer;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.check input{ width:15px; height:15px; margin:0; accent-color:var(--accent); cursor:pointer }
.check:has(input:checked){
  background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft);
  font-weight:600;
}
.check:focus-within{ outline:2px solid var(--accent); outline-offset:2px }

/* 어떤 게임을 청할지 */
.ask-games{ display:grid; gap:7px; margin:10px 0 12px }
.ask-games button{
  display:flex; align-items:center; gap:9px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface-2); color:var(--text);
  padding:12px 14px; font-size:14px; font-weight:600; cursor:pointer;
  transition:border-color .14s ease, background .14s ease;
}
.ask-games button:hover:not(:disabled){ border-color:var(--accent) }
.ask-games button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.ask-games button:disabled{ opacity:.4; cursor:default }
.ask-games .ico{ font-size:17px; line-height:1; color:var(--accent); width:20px; text-align:center }
.ask-games .why{ margin-left:auto; font-size:11px; font-weight:500; color:var(--text-mute) }

/* 폰 승격 고르기 */
.promo-row{ display:flex; gap:8px; margin-top:8px }
.promo-row button{
  flex:1; border:1px solid var(--line); border-radius:12px;
  background:var(--surface-2); color:var(--text);
  padding:12px 4px 8px; cursor:pointer;
  display:grid; gap:3px; justify-items:center;
}
.promo-row button:hover{ border-color:var(--accent) }
.promo-row button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.promo-row .pg{ font-size:26px; line-height:1 }
.promo-row .pn{ font-size:11px; color:var(--text-dim) }

/* 장기 진영 표시 */
.chip[data-s="c1"]{ background:radial-gradient(circle at 34% 30%, #7fe3cf, #1f8f7a 55%, #0d5a4b) }
.chip[data-s="c2"]{ background:radial-gradient(circle at 34% 30%, #ff9d8a, #d1402c 55%, #8f2317) }

/* ── 관리자 ──────────────────────────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center; padding:16px;
  background:rgba(6,14,12,.55); backdrop-filter:blur(3px);
}
.modal-card{
  width:100%; max-width:440px; max-height:86vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:16px; display:grid; gap:12px;
  box-shadow:0 28px 70px -28px rgba(0,0,0,.7);
  animation:rise .22s cubic-bezier(.2,.9,.3,1.1) both;
}
.modal-head{ display:flex; align-items:center; gap:10px }
.modal-title{
  font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-size:19px; font-weight:700; letter-spacing:.08em; flex:1;
}

.admin-login{ display:grid; gap:8px }

.admin-panel{ display:grid; gap:10px }
.admin-stat{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  background:var(--surface-2); border-radius:11px; padding:10px 8px;
}
.admin-stat div{ text-align:center; min-width:0 }
.admin-stat .v{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:17px;
  font-weight:500; font-variant-numeric:tabular-nums; color:var(--accent);
}
.admin-stat .k{ font-size:10px; color:var(--text-mute); letter-spacing:.06em }

.admin-rooms-head{ display:flex; align-items:center; gap:8px }
.admin-rooms-head .label{ margin:0; flex:1 }

/* ── 관리자 모니터 ────────────────────────────────────────
   좁은 화면에서는 한 줄에 하나씩, 넓어지면 나란히. 폭을 미디어 쿼리로
   나누지 않고 auto-fit 에 맡긴다 — 모달 폭은 화면 폭과 따로 놀아서,
   기기 크기로 가르면 태블릿에서 어긋난다. */
.mon-head{ display:flex; align-items:center; gap:8px; margin-top:2px }
.mon-head .label{ margin:0; flex:1 }
.mon-note{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px; color:var(--text-mute); font-variant-numeric:tabular-nums;
}

.gauges{ display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:6px }
.gauge{
  background:var(--surface-2); border-radius:11px; padding:9px 10px;
  display:grid; gap:6px; min-width:0;
}
.gauge .top{ display:flex; align-items:baseline; gap:6px }
.gauge .nm{ font-size:11px; color:var(--text-mute); letter-spacing:.06em; flex:1 }
.gauge .pc{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:16px;
  font-weight:500; font-variant-numeric:tabular-nums; color:var(--text);
}
.gauge .bar{ height:5px; border-radius:999px; background:var(--line); overflow:hidden }
.gauge .bar i{ display:block; height:100%; border-radius:999px; background:var(--accent) }
.gauge[data-hot="1"] .bar i{ background:var(--warn) }
.gauge[data-hot="1"] .pc{ color:var(--warn) }
.gauge .sub{ font-size:10.5px; color:var(--text-mute) }

.mon-games{ display:flex; flex-wrap:wrap; gap:5px }
.mon-game{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:999px; padding:5px 11px;
  font-size:12.5px; color:var(--text-dim);
}
.mon-game .ico{ font-size:13px; line-height:1 }
.mon-game .n{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums; color:var(--text); font-weight:600;
}
.mon-game[data-on="1"]{ border-color:var(--accent); color:var(--text) }

.seg.small button{ padding:6px 4px; font-size:11.5px }
.seg.small{ flex:0 0 auto }
.seg.small.wide{ flex:1 }

.mon-keys{ display:flex; flex-wrap:wrap; gap:5px }
.mon-key{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--line); border-radius:999px; padding:4px 10px;
  font-size:12px; color:var(--text-mute); cursor:pointer; background:transparent;
}
.mon-key .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none }
.mon-key[aria-pressed="true"]{ color:var(--text); border-color:currentColor }
.mon-key:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }

.mon-chart{ position:relative; background:var(--surface-2); border-radius:11px; padding:8px }
.mon-chart canvas{ display:block; width:100%; height:150px }
@media (min-width:520px){ .mon-chart canvas{ height:190px } }
.mon-empty{
  position:absolute; inset:0; display:grid; place-items:center; margin:0;
  padding:0 18px; text-align:center; font-size:11.5px; color:var(--text-mute);
}

.admin-rooms{
  display:flex; flex-direction:column; gap:6px;
  max-height:34vh; overflow-y:auto; overscroll-behavior:contain;
}
.admin-room{
  display:flex; align-items:center; gap:9px;
  border:1px solid var(--line); border-radius:11px; padding:8px 10px;
}
.admin-room .code{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:13px;
  letter-spacing:.12em; color:var(--accent); flex:none;
}
.admin-room .meta{ min-width:0; flex:1; display:grid }
.admin-room .t{
  font-size:12.5px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.admin-room .s{ font-size:10.5px; color:var(--text-mute) }
.admin-room .kill{
  flex:none; border:1px solid var(--line); background:transparent; color:var(--warn);
  font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:9px; cursor:pointer;
}
.admin-room .kill[data-armed="1"]{ background:var(--warn); border-color:var(--warn); color:#fff }
.admin-room .kill:focus-visible{ outline:2px solid var(--warn); outline-offset:1px }

.admin-notice{ display:flex; gap:6px }
.admin-notice .field{ flex:1 }

/* ── 넓은 화면: 판 왼쪽, 나머지 오른쪽 ───────────────────── */
@media (min-width:760px) and (min-aspect-ratio:1/1){
  #game{
    max-width:1000px;
    grid-template-columns:1fr 300px;
    grid-template-rows:auto auto auto 1fr auto;
    grid-template-areas:
      "top   side"
      "board side"
      "board side"
      "board side"
      "board side";
    column-gap:20px; padding:20px;
  }
  .topbar{ grid-area:top }
  .board-wrap{ grid-area:board }
  .seats, .status, .chat, .actions, .actions-solo{ grid-area:side }
  .seats{ align-self:start }
  .status{ align-self:start; margin-top:64px }
  .chat{ align-self:stretch; margin-top:112px; margin-bottom:56px; grid-template-rows:1fr auto }
  .chat .chat-log{ display:flex; height:auto; min-height:0 }
  .chat .chat-toggle{ display:none }
  .actions, .actions-solo{ align-self:end }
  #lobby{ max-width:620px }
}

/* ── 배드민턴 ─────────────────────────────────────────────
   경기가 시작되면 화면을 통째로 쓴다. 좁은 폰에서 코트를 위아래로 다
   보여줘야 셔틀콕이 어디로 오는지 읽히고, 그래야 스윙 타이밍이 잡힌다.
   그래서 대국 화면의 다른 부품은 전부 접고 판만 남긴다. */
/* 넓은 화면에서는 #game 이 판·곁판 두 칸짜리 격자다. 그 격자를 여기서
   완전히 지우지 않으면 board 라는 이름의 칸이 아래쪽 빈 줄에 남아, 판이
   화면 밖 높이 0 짜리 칸에 놓인다 — 지우고 한 칸짜리로 다시 짠다. */
body.bd-full #game{
  max-width:none; padding:0; gap:0;
  grid-template-columns:1fr;
  grid-template-rows:1fr;
  grid-template-areas:"board";
}
body.bd-full #game > *{ display:none !important }
body.bd-full #game > .board-wrap{ display:grid !important }
body.bd-full .board-wrap{ place-items:stretch }
body.bd-full #board{ border-radius:0; box-shadow:none; width:100%; height:100% }
/* 채팅은 접힌 채로 남겨 둔다 — 열면 화면 아래에서 올라온다 */
body.bd-full #game > .chat.bd-show{
  display:grid !important;
  position:absolute; left:0; right:0; bottom:0; z-index:6;
  max-height:52vh; margin:0; padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  background:var(--surface); border-top:1px solid var(--line);
}

.bd-bar{
  position:absolute; z-index:5;
  left:0; right:0; top:0;
  display:flex; align-items:center; gap:8px;
  padding:calc(6px + env(safe-area-inset-top,0px)) 10px 6px;
  pointer-events:none;
}
.bd-bar .spacer{ flex:1 }
.bd-btn{
  pointer-events:auto;
  position:relative;
  min-width:38px; height:38px; padding:0 10px;
  display:inline-grid; place-items:center;
  font-size:17px; line-height:1;
  color:#eaf1f8; background:rgba(10,18,30,.52);
  border:1px solid rgba(255,255,255,.16); border-radius:11px;
  cursor:pointer; backdrop-filter:blur(4px);
}
.bd-btn:active{ background:rgba(10,18,30,.78) }
.bd-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center;
  font-size:10.5px; font-weight:600; line-height:1;
  color:var(--accent-in); background:var(--accent); border-radius:999px;
}
.bd-tip{
  position:absolute; z-index:5; left:12px; right:12px; bottom:14px;
  padding:10px 13px; border-radius:12px;
  font-size:12.5px; line-height:1.55;
  color:#e8eff7; background:rgba(8,16,28,.72);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(4px);
  animation:rise .3s ease both;
  pointer-events:none;
}
.bd-tip b{ color:#ffd65c; font-weight:600 }
/* 화면에 뜨는 고리와 같은 초록 — 글과 그림이 같은 것을 가리키게 한다 */
.bd-tip b.ring{ color:#7dffb4 }

/* ── 무법자 ───────────────────────────────────────────────
   카드 게임이라 캔버스가 아니라 DOM 으로 그린다. 글자가 들어가고 개수도
   제각각이라 HTML 이 훨씬 맞고, 카드 그림도 CSS 로 만들면 내려받아
   라이선스를 관리할 것이 없다.
   화면은 가로로 쓴다 — 일곱 자리와 손패를 세로로는 담을 수 없다. */
body.bang-full #game{
  max-width:none; padding:0; gap:0;
  grid-template-columns:1fr;
  grid-template-rows:1fr;
  grid-template-areas:"board";       /* 배드민턴과 같은 이유 — 위 주석 참고 */
}
body.bang-full #game > *{ display:none !important }
body.bang-full #game > .board-wrap{ display:block !important; overflow:hidden }
body.bang-full .board-wrap{ place-items:stretch }
body.bang-full #board{ display:none !important }
body.bang-full .bang-root{ display:flex !important }
/* 나가기·채팅·설정 단추는 배드민턴 것을 그대로 쓴다. 판 위에 겹쳐 놓으면
   자리 카드를 가리므로, 오른쪽 끝에 세로로 세워 두고 그만큼 판을 좁힌다.
   가로 안내(z-index 9)보다 위에 둔다 — 세로로 들고 있어도 나가기는 눌려야 한다. */
body.bang-full .bd-bar{
  display:flex !important; z-index:10;
  left:auto; right:0; top:0; bottom:0; width:46px;
  flex-direction:column; gap:6px;
  padding:calc(6px + env(safe-area-inset-top,0px)) 4px
          calc(6px + env(safe-area-inset-bottom,0px));
}
body.bang-full #game > .chat.bd-show{
  display:grid !important;
  position:absolute; left:0; right:0; bottom:0; z-index:8;
  max-height:60vh; margin:0; padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  background:var(--surface); border-top:1px solid var(--line);
}

.bang-root{
  position:absolute; inset:0; z-index:3;
  display:none; flex-direction:column; gap:6px;
  padding:calc(6px + env(safe-area-inset-top,0px)) 50px
          calc(6px + env(safe-area-inset-bottom,0px)) 8px;
  background:
    radial-gradient(120% 90% at 50% 0%, #2a3a2e 0%, #16211a 60%, #0d1512 100%);
  color:#e9efe9; font-size:12px; overflow:hidden;
}

/* 세로로 들면 게임을 가리고 돌려달라고만 말한다 */
.rotate-ask{
  position:absolute; inset:0; z-index:9;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:24px;
  background:#0d1512; color:#e9efe9;
}
.rotate-ask .ic{ font-size:44px; animation:tiltx 2.2s ease-in-out infinite }
.rotate-ask b{ font-size:16px }
.rotate-ask .s{ font-size:12px; color:#93a89a; max-width:22em; line-height:1.6 }
@keyframes tiltx{ 0%,60%,100%{ transform:rotate(0) } 80%{ transform:rotate(-90deg) } }
@media (orientation:portrait){
  body.bang-full .rotate-ask:not([hidden]){ display:flex }
}

/* 실제 탁자처럼 놓는다 — 맞은편에 남들, 가운데에 덱과 버린 더미와 기록,
   맨 아래가 내 손패. 자리 카드를 가로로 늘리지 않고 폭을 묶어 가운데로
   모으는 이유는, 넓은 화면에서 글자 몇 줄이 카드 하나 폭으로 퍼지면
   판이 아니라 표처럼 보이기 때문이다. */
/* 아주 낮은 화면(320px 안팎으로 눕힌 폰)에서는 자리 카드가 넘친다.
   그때는 판 위로 흘러넘치게 두지 말고 이 칸 안에서 스크롤시킨다 —
   넘쳐서 손패 위에 겹쳐 그려지면 아무것도 못 읽는다. */
.btable{ flex:1; min-height:0; display:flex; flex-direction:column; gap:6px;
         overflow:hidden }
/* 자리는 접지 않고 한 줄로 늘어놓는다. 접는 순간 '내 옆자리'가 화면에서
   멀어지고 먼 자리가 가까워 보여, 거리 숫자가 거짓말처럼 읽힌다. */
.bring{
  /* 위를 맞춘다. 아래를 맞추면 자리마다 높이가 다를 때(능력 설명이 한
     줄이냐 두 줄이냐, 야생마를 탔느냐) 그 차이만큼 짧은 자리가 아래로
     밀려나 윗줄이 들쭉날쭉해진다 — 실제로 40px 내려앉았다. */
  flex:none; min-height:0; display:grid; gap:5px; justify-content:center;
  align-items:start; overflow-x:auto; overflow-y:hidden; padding-top:16px;
  grid-auto-flow:column; grid-auto-columns:minmax(132px,220px);
}
.bring > *{ transform:translateY(var(--lift,0px)) }

/* 내 자리. 차례가 한 바퀴 도는 것을 세려면 내가 줄 안에 있어야 하는데,
   그렇다고 남의 자리와 똑같이 보이면 어느 게 나인지 매번 찾게 된다. */
/* 내 자리는 조용히 표시한다. 금색은 '지금 차례'가 쓰므로 둘이 같은 색이면
   어느 것이 차례인지 매번 다시 읽게 된다. */
.bseat[data-me="1"]{
  border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.05);
}
.bseat[data-me="1"] .bh .nm{ color:#f0f6f1 }
.bseat[data-me="1"]::after{
  content:'내 자리'; position:absolute; right:7px; bottom:5px;
  font-size:9px; font-weight:600; color:#9fb6a6; opacity:.7;
}
.bseat[data-me="1"][data-turn="1"]{ border-color:#e0b25c }

.bseat{
  border:1px solid rgba(255,255,255,.10); border-radius:10px;
  padding:5px 7px; background:rgba(255,255,255,.045);
  display:grid; gap:3px; align-content:start; min-width:0;
}
/* 지금 차례인 사람. 테두리 색만 바꾸면 여섯 칸 중 어느 것인지 한눈에
   안 들어온다. 두께를 주고(자리가 밀리지 않게 box-shadow 로) 천천히
   숨쉬게 한다. 색맹인 사람도 알아보게 머리에 '차례'라고 적어 둔다. */
.bseat[data-turn="1"]{
  border-color:#e0b25c; background:rgba(224,178,92,.14);
  box-shadow:0 0 0 2px #e0b25c, 0 0 20px -3px rgba(224,178,92,.55);
  animation:turn-breathe 2.1s ease-in-out infinite;
}
@keyframes turn-breathe{
  0%,100%{ box-shadow:0 0 0 2px #e0b25c, 0 0 18px -4px rgba(224,178,92,.45) }
  50%{ box-shadow:0 0 0 3px #f2cd85, 0 0 28px -2px rgba(224,178,92,.85) }
}
.bseat .turn{
  flex:none; font-size:9px; font-weight:700; letter-spacing:.02em;
  color:#20180c; background:#e0b25c; border-radius:999px; padding:2px 7px;
}
@media (prefers-reduced-motion:reduce){
  .bseat[data-turn="1"]{ animation:none }
}
/* 피 — 맞은 자리 위로 흘러내린다. 자리 안에 얹으므로 자리가 다시
   그려지면 함께 사라지는데, 그게 알맞다: 지난 판의 피가 새 판의
   자리에 남아 있으면 안 된다. */
.bseat{ position:relative }
.bblood{
  position:absolute; inset:0; border-radius:10px; overflow:hidden;
  pointer-events:none; z-index:3;
}
/* 테두리 전체가 붉게 번진다 */
.bblood u{
  position:absolute; inset:0; border-radius:10px;
  box-shadow:inset 0 0 0 2px rgba(176,20,20,.9),
             inset 0 0 18px rgba(150,14,14,.75);
}
/* 윗변에 피가 고인다 — 여기서 줄기가 시작된다 */
.bblood s{
  position:absolute; left:0; right:0; top:0; height:7px;
  transform-origin:top center; border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,
    rgba(190,26,26,.98) 0%, rgba(150,16,16,.9) 70%, rgba(150,16,16,0) 100%);
}
/* 흘러내리는 줄기 */
.bblood i{
  position:absolute; top:0; width:4px; border-radius:0 0 3px 3px;
  background:linear-gradient(180deg,
    rgba(150,18,18,.95) 0%, rgba(190,26,26,.92) 55%, rgba(120,10,10,.85) 100%);
  box-shadow:0 0 6px rgba(180,20,20,.7);
}
/* 방울 끝이 뭉쳐 맺힌다 */
.bblood i::after{
  content:''; position:absolute; left:50%; bottom:-3px;
  width:7px; height:7px; margin-left:-3.5px; border-radius:50%;
  background:rgba(180,22,22,.95); box-shadow:0 0 6px rgba(180,20,20,.6);
}
/* 양옆 테두리를 타고 내려가는 줄기 */
.bblood em{
  position:absolute; top:0; width:4px;
  background:linear-gradient(180deg,
    rgba(160,18,18,.95) 0%, rgba(190,26,26,.9) 60%, rgba(120,10,10,.8) 100%);
  box-shadow:0 0 7px rgba(180,20,20,.7);
}
.bblood em[data-side="l"]{ left:0; border-radius:0 0 0 9px }
.bblood em[data-side="r"]{ right:0; border-radius:0 0 9px 0 }
/* 버린 더미가 쌓여 보인다 — 뒤에 카드를 겹쳐 깐다 */
.bpile.discard{ position:relative }
.bpile.discard .pileshim{
  position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:repeating-linear-gradient(45deg,#4a3227,#4a3227 3px,#5b3f31 3px,#5b3f31 6px);
  border:1px solid rgba(0,0,0,.35);
  transform:translate(calc(var(--i) * 2.2px), calc(var(--i) * -2.2px))
            rotate(calc(var(--i) * 1.6deg));
  opacity:calc(1 - var(--i) * 0.09);
}
.bpile.discard > *{ position:relative }

/* ── 판이 열릴 때의 카드 뽑기 ──
   손패의 뒷면(.bcard.back)과 같은 무늬를 쓴다. 다른 무늬를 쓰면 '이 판의
   카드'가 아니라 딴 데서 온 것처럼 보인다. */
.bdeal{
  position:absolute; inset:0; z-index:14;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,13,11,.9); backdrop-filter:blur(3px);
}
.bdeal .c{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:20px 26px; border-radius:16px; text-align:center;
  background:rgba(22,33,26,.98); border:1px solid rgba(255,255,255,.16);
  box-shadow:0 22px 54px -12px rgba(0,0,0,.85);
  max-width:min(92vw, 620px);
}
.bdeal .c > b{ font-size:17px; color:#f0f6f1 }
.bdeal .c > .s{ font-size:11.5px; color:#93a89a }
.bdeal .row{ display:flex; gap:14px; margin:2px 0 }

/* 카드 한 장. 뒤집기는 안쪽 상자를 돌려서 만든다. */
.dcard{
  width:clamp(110px, 26vw, 158px); height:clamp(154px, 36vw, 214px);
  padding:0; border:0; background:none; cursor:pointer;
  perspective:800px; flex:none;
}
.dcard .in{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform .62s cubic-bezier(.2,.8,.3,1);
}
.dcard[data-on="1"] .in{ transform:rotateY(180deg); cursor:default }
.dcard .dside{
  position:absolute; inset:0; border-radius:12px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:10px; text-align:center;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.75);
}
/* 뒷면 — 손패 뒷면과 같은 무늬 */
.dcard .dside.dback{
  background:repeating-linear-gradient(45deg,#5b3a2e,#5b3a2e 4px,#6d4737 4px,#6d4737 8px);
  color:#c9a88f; border:1px solid rgba(255,255,255,.14);
}
.dcard .dside.dback .bk{ font-size:32px; line-height:1 }
.dcard .dside.dback .lb{ font-size:11px; letter-spacing:2px; opacity:.85 }
.dcard:hover .dside.dback{ filter:brightness(1.15) }
/* 앞면 */
.dcard .dside.dfront{
  transform:rotateY(180deg);
  background:linear-gradient(163deg,#f6ecd6,#e2d3b4); color:#3b2416;
  border:1px solid rgba(0,0,0,.2);
}
.dcard .dside.dfront .ic{ font-size:34px; line-height:1 }
.dcard .dside.dfront .face{ width:46px; height:46px }
.dcard .dside.dfront b{ font-size:14px }
.dcard .dside.dfront .t{ font-size:10px; line-height:1.4; color:#6b5238;
                   word-break:keep-all }
.dcard .dside.dfront .hp{ font-size:10px; color:#8a6a44; font-weight:700 }
.dcard .dside.dfront[data-r="sheriff"]{ box-shadow:inset 0 0 0 3px #e0b25c }
.dcard .dside.dfront[data-r="deputy"]{ box-shadow:inset 0 0 0 3px #8fb6e0 }
.dcard .dside.dfront[data-r="outlaw"]{ box-shadow:inset 0 0 0 3px #e07a7a }
.dcard .dside.dfront[data-r="renegade"]{ box-shadow:inset 0 0 0 3px #c08fe0 }
.bdeal .btn{ padding:9px 22px; border-radius:10px; margin-top:2px }
.bdeal .c > .s2{ font-size:11px; color:#7d8f83 }
/* 나는 확인했고 남을 기다리는 중 */
.bdeal .wait{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  margin-top:4px; padding:9px 18px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
}
.bdeal .wait b{ font-size:15px; color:#e0b25c; font-variant-numeric:tabular-nums }
.bdeal .wait span{ font-size:11.5px; color:#93a89a }

@media (prefers-reduced-motion: reduce){
  .dcard .in{ transition:none }
}

/* 일시정지 단추 — 판 바깥 구석에, 다른 색으로.

   게임 조작 단추와 나란히 두었더니 턴을 마치려다 판을 세울 수 있었다.
   나가기·채팅·설정이 있는 가장자리 줄 맨 끝(구석)으로 옮기고, 그 셋과도
   구별되게 호박색으로 둔다 — 되돌릴 수 있는 조작(설정)과 판 전체를
   멈추는 조작은 무게가 다르다. 남은 횟수를 옆에 달아, 몇 번 남았는지
   모르는 채로 아끼게 되는 일도 없앤다. */
.bd-btn.pause{
  color:#2a1c08; background:rgba(224,178,92,.92);
  border-color:rgba(255,214,140,.7);
}
.bd-btn.pause:hover{ background:rgba(240,196,110,.98) }
.bd-btn.pause .k{
  position:absolute; right:-3px; bottom:-3px;
  font-size:9px; font-weight:800; line-height:14px; min-width:14px;
  color:#f4e7c8; background:#3a2c14; border-radius:999px; padding:0 4px;
  border:1px solid rgba(255,214,140,.6);
}
.bd-btn.pause:disabled{ opacity:.4; cursor:default }
/* 무법자에서만 보인다 */
body:not(.bang-full) .bd-btn.pause{ display:none }

/* 멈춰 있는 동안 판 전체를 덮는다 */
.bpause{
  position:absolute; inset:0; z-index:11;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,13,11,.86); backdrop-filter:blur(2px);
}
.bpause .c{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:22px 30px; border-radius:16px; text-align:center;
  background:rgba(22,33,26,.98); border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 50px -12px rgba(0,0,0,.85);
}
.bpause .ic{ font-size:38px; color:#e0b25c; line-height:1 }
.bpause b{ font-size:17px; color:#f0f6f1 }
.bpause .w{ font-size:13px; color:#cfdcd3 }
.bpause .cd{ display:flex; align-items:baseline; gap:3px; margin:2px 0 }
.bpause .cd .num{
  font-size:44px; font-weight:800; line-height:1; color:#e0b25c;
  font-variant-numeric:tabular-nums; letter-spacing:1px;
}
.bpause .cd .u{ font-size:14px; color:#93a89a }
.bpause .s{ font-size:11.5px; color:#93a89a }
.bpause .s2{ font-size:11px; color:#7d8f83 }
.bpause .btn{ margin-top:4px; padding:9px 20px; border-radius:10px }
/* 멈춘 동안에 읽을 것 — 기록과 대화 */
.bpause .look{ display:flex; gap:8px; margin-top:2px }
.bpause .look .btn{ margin-top:0; padding:7px 14px; font-size:12px;
                    display:inline-flex; align-items:center; gap:5px }
.bpause .look .btn .k{
  font-size:9px; font-weight:800; color:#0d1512; background:#e0b25c;
  border-radius:999px; padding:0 5px; line-height:14px;
}
/* 멈춰 있을 때만 두 창을 멈춤 화면 위로 올린다. 평소에 이러면 답해야
   하는 물음을 가려 버린다. */
.bang-root[data-paused="1"] .blogfull{ z-index:12 }
.bang-root[data-paused="1"] .bchatfull{ z-index:13 }

/* ── 판 안의 대화 ──
   무법자만 이렇게 한다. 가로로 꽉 찬 화면에서는 채팅이 아래에 접혀
   있어서, 아이콘을 누르기 전에는 누가 말을 걸었는지 알 수가 없다.
   기록(.blog)과 같은 모양으로 곁칸에 두어 눈이 가던 자리에서 함께 읽힌다. */
.bchat{
  flex:none; display:flex; flex-direction:column; gap:2px; min-height:0;
  border:1px solid rgba(255,255,255,.10); border-radius:10px;
  background:rgba(255,255,255,.045); color:#9fb6a6;
  padding:4px 6px 5px; font-family:inherit; text-align:left;
  cursor:pointer; max-height:96px; overflow:hidden;
}
.bchat:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2) }
.bchat .h{ display:flex; align-items:center; gap:5px; flex:none }
.bchat .h b{ font-size:9px; color:#7d8f83; letter-spacing:.4px }
/* 안 읽은 것이 있으면 숫자를 띄운다. 색만 바꾸면 눈에 안 들어온다. */
.bchat .h .new{
  font-size:8.5px; font-weight:800; color:#0d1512; background:#e0b25c;
  border-radius:999px; padding:0 5px; line-height:14px;
}
.bchat[data-new="1"]{ border-color:rgba(224,178,92,.6) }
.bchat .b{ display:flex; flex-direction:column; gap:1px; min-height:0;
           overflow-y:auto; overscroll-behavior:contain }
.bchat .ln{ font-size:9.5px; line-height:1.35; word-break:break-word }
.bchat .ln .nm{ color:#e0b25c; font-weight:700; margin-right:3px }
.bchat .ln[data-k="me"] .nm{ color:#7dffb4 }
.bchat .ln[data-k="sys"]{ color:#6f8177; font-size:9px }
.bchat .ln.empty{ color:#6f8177 }

/* 눌러서 크게 펼친 대화 */
.bchatfull{
  position:absolute; inset:8px; z-index:8;
  display:flex; flex-direction:column; gap:6px;
  background:rgba(13,21,18,.97); border:1px solid rgba(255,255,255,.16);
  border-radius:14px; padding:10px 12px;
  box-shadow:0 18px 44px -10px rgba(0,0,0,.8);
}
.bchatfull .h{ display:flex; align-items:center; gap:8px; flex:none }
.bchatfull .h b{ font-size:13px; color:#e9efe9 }
.bchatfull .h .n{ font-size:11px; color:#7d8f83; margin-right:auto }
.bchatfull .b{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:3px; padding-right:4px;
}
.bchatfull .ln{ font-size:12px; line-height:1.5; word-break:break-word;
                color:#cfdcd3 }
.bchatfull .ln .nm{ color:#e0b25c; font-weight:700; margin-right:5px }
.bchatfull .ln[data-k="me"] .nm{ color:#7dffb4 }
.bchatfull .ln[data-k="sys"]{ color:#7d8f83; font-size:11px }
.bchatfull .ln.empty{ color:#7d8f83 }
.bchatfull .f{ display:flex; gap:6px; flex:none }
.bchatfull .f .field{
  flex:1; min-width:0; border-radius:9px; padding:8px 11px; font-size:13px;
  background:rgba(255,255,255,.07); color:#e9efe9;
  border:1px solid rgba(255,255,255,.16); font-family:inherit;
}
.bchatfull .f .field:focus{ outline:none; border-color:#e0b25c }
.bchatfull .f .btn{ padding:8px 14px; border-radius:9px; flex:none }

/* 야생마 스티커 — 얼굴 바로 밑에 붙어, 타고 있는 것처럼 보인다.
   음수 여백으로 얼굴 아래에 살짝 파고들게 둔다. */
.bmount{
  margin:-3px 0 0 6px; width:30px; height:30px; flex:none;
  transform-origin:50% 80%; pointer-events:auto;
}
.bmount .art{ width:100%; height:100%;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)) }

/* 결투 — 화면 한복판을 가로지르는 대결 알림 */
.bfx .tok.duelband{
  left:0; top:50%; width:100%; height:auto; margin-top:-38px;
  border-radius:0; background:none; box-shadow:none;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,4vw,54px);
}
.bfx .tok.duelband .side{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px clamp(10px,2.4vw,20px);
  border-radius:14px; min-width:0;
  background:linear-gradient(180deg,rgba(38,30,22,.96),rgba(24,18,13,.96));
  box-shadow:0 12px 34px -8px rgba(0,0,0,.85),
             0 0 0 2px rgba(224,178,92,.7);
}
.bfx .tok.duelband .side .face{
  width:clamp(38px,9vw,64px); height:clamp(38px,9vw,64px);
}
.bfx .tok.duelband .side .nm{
  font-size:clamp(12px,2.6vw,20px); font-weight:800; color:#f4e7c8;
  white-space:nowrap; letter-spacing:.5px;
}
.bfx .tok.duelband .vs{
  font-size:clamp(26px,7vw,60px); font-weight:900; color:#e8a93b;
  letter-spacing:2px; font-style:italic;
  text-shadow:0 3px 0 #7a3a1c, 0 0 22px rgba(232,169,59,.75);
}

/* 회복 — 자리가 아래에서 위로 초록빛에 잠긴다 */
.bheal{
  position:absolute; inset:0; border-radius:10px; pointer-events:none;
  z-index:2; transform-origin:bottom center;
  background:linear-gradient(0deg,
    rgba(125,255,180,.55) 0%, rgba(125,255,180,.22) 55%,
    rgba(125,255,180,0) 100%);
  box-shadow:inset 0 0 22px rgba(125,255,180,.45);
}

/* 능력이 터진 기록 줄 */
.blog .ln[data-ch="1"] .s{ color:#f0dca8 }
.blog .ln[data-ch="1"]{ border-left:2px solid rgba(224,178,92,.65);
                        padding-left:5px }

/* 캐릭터 능력 — 자리 안에 늘 적어 둔다. 두 줄까지만 보이고 넘치면
   자르되, 전체 문장은 얼굴을 눌렀을 때 뜨는 설명이 갖고 있다. */
.bseat .ab{
  font-size:8.5px; line-height:1.28; color:#8ea396; margin-top:1px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:keep-all;
}
.bseat[data-me="1"] .ab{ color:#a9c0b1 }
.bseat[data-ask="1"]{ border-color:#e07a5c; box-shadow:0 0 0 1px rgba(224,122,92,.5) }
.bseat[data-dead="1"]{ opacity:.42; filter:grayscale(.7) }
.bseat[data-pick="1"]{ cursor:pointer; border-color:#7dffb4; background:rgba(125,255,180,.14) }
.bseat[data-pick="1"]:hover{ background:rgba(125,255,180,.24) }
/* 고르는 중인데 이 카드가 안 닿는 사람 — 눌러보고 거절당하기 전에 알려준다 */
.bseat[data-nopick="1"]{ opacity:.34; filter:grayscale(.5) }
.bseat .bh{ display:flex; align-items:center; gap:5px; min-width:0 }
.bseat .bh .nm{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-weight:600;
}
/* 거리 배지. 숫자만으로는 가까운지 먼지 알 수 없어서, 내 사거리와 견줘
   '닿는다 / 안 닿는다' 두 가지로 색을 갈랐다. ◎ 가 붙은 쪽이 지금 쏠 수 있다. */
.bseat .dist{
  flex:none; font-size:10px; font-weight:600; line-height:1;
  padding:2.5px 6px; border-radius:999px; border:1px solid transparent;
  font-variant-numeric:tabular-nums;
}
.bseat .dist[data-reach="in"]{
  color:#7dffb4; border-color:rgba(125,255,180,.45);
  background:rgba(125,255,180,.12);
}
.bseat .dist[data-reach="out"]{ color:#7d8f83; border-color:rgba(255,255,255,.10) }
.role{
  font-size:9.5px; padding:1px 5px; border-radius:999px; flex:none;
  border:1px solid currentColor; letter-spacing:.02em;
}
.role[data-r="sheriff"]{ color:#e0b25c }
.role[data-r="deputy"]{ color:#6fb8e0 }
.role[data-r="outlaw"]{ color:#e07a7a }
.role[data-r="renegade"]{ color:#c08fe0 }
.role[data-r="hidden"]{ color:#7d8f83; font-size:9px; padding:1px 4px; opacity:.85 }
/* 자리 안의 얼굴. 눌러야 능력이 보이므로 눌러도 된다는 티가 나야 한다. */
.bseat .ch, .bmi .ch{
  display:flex; align-items:center; gap:5px; min-width:0;
  padding:2px 7px 2px 2px; border-radius:999px; cursor:pointer;
  font-size:10.5px; color:#9fb6a6; font-family:inherit; text-align:left;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
}
.bseat .ch:hover, .bmi .ch:hover{
  background:rgba(255,255,255,.11); color:#e4ede8;
}
.bseat .ch .n, .bmi .ch .n{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.face{
  width:22px; height:22px; flex:none; border-radius:50%;
  background:rgba(255,255,255,.10);
}
.bmi .ch{ font-size:11px; color:#e9efe9; font-weight:600 }
.bmi .ch .face{ width:24px; height:24px }

/* 능력 설명 — 손가락으로 눌러 여는 창. 휴대폰에는 마우스를 올릴 방법이 없다. */
.bchar{
  position:absolute; inset:0; z-index:8; display:grid; place-items:center;
  background:rgba(8,14,11,.62);
}
.bchar .c{
  display:flex; align-items:center; gap:12px; max-width:min(92%,430px);
  padding:14px 16px; border-radius:14px;
  background:#18241d; border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 48px -18px rgba(0,0,0,.8);
}
.face.big{ width:62px; height:62px }
.bchar .tx{ display:grid; gap:3px; min-width:0 }
.bchar .tx b{ font-size:15px }
.bchar .tx .who{ font-size:11px; color:#8fa696 }
.bchar .tx .ab{ font-size:12.5px; color:#c6d6ca; line-height:1.5 }
.bchar .btn{ padding:6px 12px; font-size:11.5px; align-self:start }
@media (max-height:470px){
  .bchar .c{ padding:10px 12px; gap:9px }
  .face.big{ width:48px; height:48px }
  .bchar .tx b{ font-size:13.5px }
  .bchar .tx .ab{ font-size:11.5px }
}
.hp{ display:flex; align-items:center; gap:2px }
.hp .b{ width:7px; height:7px; border-radius:50%; background:#e05c5c; flex:none }
.hp .b[data-off="1"]{ background:rgba(255,255,255,.16) }
.hp .cnt{ margin-left:4px; font-size:10px; color:#8fa696;
          font-family:'IBM Plex Mono',ui-monospace,monospace }
.bseat .bar{ display:flex; gap:8px; font-size:10.5px; color:#a9bdb0 }
.bseat .bar .gun{ color:#e0b25c }
.bseat .eq{ display:flex; flex-wrap:wrap; gap:3px }
.bseat .eq .ei{
  width:20px; height:20px; padding:1px; border-radius:5px;
  display:grid; place-items:center;
  background:rgba(240,232,214,.92); border:1px solid rgba(59,36,22,.35);
}
.bseat .eq .ei .art{ width:100%; height:100% }

.bmid{
  position:relative;
  flex:1; min-height:0; display:flex; gap:8px; justify-content:center;
  align-items:center;
}
/* 탁자. 넓은 화면에서 가운데가 그냥 빈 바닥으로 보이지 않게 깔아둔다. */
.bmid::before{
  content:''; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(86%,820px); height:min(92%,320px); border-radius:50%;
  background:radial-gradient(closest-side,
             rgba(126,186,150,.11), rgba(126,186,150,0));
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}
.bmid > *{ position:relative }
.bpile{
  flex:none; width:96px; align-self:center;
  border:1px dashed rgba(255,255,255,.18); border-radius:9px; padding:8px 6px;
  display:grid; place-items:center; gap:1px;
}
.bpile.discard{ border-style:solid; background:rgba(255,255,255,.05) }
.bpile .n{ font-size:17px; font-weight:600;
           font-family:'IBM Plex Mono',ui-monospace,monospace }
.bpile .i{ font-size:19px; line-height:1 }
.bpile .art{ width:44px; height:44px }
.bpile.discard{ padding:6px }
.bpile .l{ font-size:9.5px; color:#8fa696 }
.bpile .btip{ font-size:9px; color:#e0b25c; font-weight:600 }
/* 곁의 기록칸. 마지막 여덟 줄만 보이고, 누르면 처음부터 펼쳐진다. */
.blog{
  flex:1; min-width:0; max-width:460px; max-height:100%; overflow:hidden;
  align-self:center; font-size:10.5px; line-height:1.5; text-align:left;
  color:#9fb6a6; background:rgba(0,0,0,.26); border-radius:9px; padding:5px 7px;
  border:1px solid rgba(255,255,255,.07); cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; justify-content:flex-end; gap:1px;
}
.blog:hover{ background:rgba(0,0,0,.36); border-color:rgba(255,255,255,.16) }
/* 맨 위 줄은 칸에 다 안 들어간다. 잘린 채로 두면 고장난 것처럼 보이므로
   흐려지게 해 '위에 더 있다'는 뜻이 되게 한다. */
.blog{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16px);
  mask-image:linear-gradient(to bottom, transparent 0, #000 16px);
}
.blog .ln{
  display:flex; align-items:center; gap:4px; min-width:0;
  padding:1px 0; border-bottom:1px solid rgba(255,255,255,.05);
}
.blog .ln .s{ flex:none; white-space:nowrap }
.blog .ln .fx{
  color:#6e8176; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.blog .ln .art{ width:13px; height:13px; flex:none }
.blog .ln.empty{ color:#6e8176; border:0 }

/* 펼친 기록 — 여기서 위아래로 훑어본다 */
/* 펼친 기록은 넓은 화면에서 오른쪽 절반만 덮는다. 판을 통째로 가리면
   기록을 읽는 동안 무슨 일이 벌어지는지 못 본다. */
.blogfull{
  position:absolute; z-index:7;
  left:auto; right:52px; top:8px; bottom:8px; width:min(520px, 64%);
  display:flex; flex-direction:column;
  background:rgba(12,20,16,.97); border:1px solid rgba(255,255,255,.16);
  border-radius:13px; box-shadow:0 20px 50px -18px rgba(0,0,0,.8);
}
.blogfull .h{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.10);
}
.blogfull .h b{ font-size:13px }
.blogfull .h .n{ flex:1; font-size:11px; color:#8fa696 }
.blogfull .h .btn{ padding:5px 12px; font-size:11.5px }
.blogfull .b{
  flex:1; min-height:0; overflow-y:auto; padding:6px 10px 10px;
  -webkit-overflow-scrolling:touch;
}
.blogfull .ln{
  display:flex; align-items:baseline; gap:7px; padding:5px 0;
  font-size:12px; line-height:1.5; border-bottom:1px solid rgba(255,255,255,.05);
}
.blogfull .ln .art{ width:18px; height:18px; flex:none; align-self:center }
.blogfull .ln .s{ flex:none; color:#e4ede8 }
.blogfull .ln .fx{ color:#8fa696; font-size:11px }
.blogfull .ln.empty{ color:#6e8176; justify-content:center; padding:20px 0 }
@media (max-height:470px){
  .blogfull{ left:8px; width:auto }     /* 좁으면 통째로 쓴다 */
  .blogfull .ln{ font-size:11px; padding:3px 0 }
  .blogfull .ln .fx{ font-size:10px }
}

.bme{ flex:none; display:flex; flex-direction:column; gap:4px }
/* 탈락·관전 — 손패가 없으니 자리도 차지하지 않는다. 판이 그만큼 넓어진다. */
.bme[data-watch="1"]{ gap:2px }
.bmi .out{
  font-size:11px; font-weight:600; color:#e0705c;
  border:1px solid rgba(224,112,92,.45); border-radius:999px; padding:2px 9px;
}

/* 카드 설명 한 줄 — 고른 카드, 아니면 방금 나온 카드 */
.bnote{
  display:flex; align-items:center; gap:6px; min-height:22px;
  padding:2px 8px 2px 3px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  font-size:11px; overflow:hidden; white-space:nowrap;
}
.bnote .art{ width:18px; height:18px; flex:none }
.bnote .who{ color:#8fa696; flex:none }
.bnote b{ color:#f0e6cf; flex:none }
.bnote .sub{ color:#8fa696; font-size:10px; flex:none }
.bnote .t{ color:#a9bdb0; min-width:0; overflow:hidden; text-overflow:ellipsis }
.bnote[data-mine="1"]{
  background:rgba(224,178,92,.13); border-color:rgba(224,178,92,.45);
}
.bnote[data-idle="1"] .t{ color:#6e8176 }
.bnote[data-fresh="1"]{ animation:bnote-in .5s ease-out }
@keyframes bnote-in{
  0%{ background:rgba(224,122,92,.34); border-color:rgba(224,122,92,.7) }
  100%{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.09) }
}
.bmi{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11px }
.bmi .ch{ font-weight:600; color:#e9efe9 }
.bmi .txt{ color:#8fa696; font-size:10.5px }
.bmi .gun{ color:#e0b25c; font-weight:600 }
/* 내가 깔아둔 것 — 그림과 수치를 나란히. 자리 칸의 것은 그림만이라
   무엇인지 눌러봐야 알지만, 여기는 내 것이라 수치까지 적어둔다. */
.bmi .eq{ display:flex; align-items:center; gap:5px; flex-wrap:wrap }
.bmi .eq .ei{
  display:flex; align-items:center; gap:4px;
  padding:2px 8px 2px 3px; border-radius:999px;
  background:rgba(110,170,255,.14); border:1px solid rgba(110,170,255,.32);
  font-size:10px; color:#cfe0f2; white-space:nowrap;
}
.bmi .eq .ei .art{ width:17px; height:17px; flex:none;
                   background:rgba(246,236,214,.9); border-radius:50% }
@media (max-height:470px){
  .bmi .eq .ei{ padding:2px 6px 2px 2px; font-size:9.5px }
  .bmi .eq .ei .art{ width:15px; height:15px }
}
.bmi .gun[data-bare="1"]{ color:#9fb6a6; font-weight:500 }

.bhand{ display:flex; gap:5px; overflow-x:auto; padding:2px 0 3px; min-height:100px }
.bhand .empty{ color:#7d8f83; align-self:center; font-size:11px }

/* 카드 한 장. 그림은 bang-art.js 가 그려 둔 것을 <use> 로 불러 쓴다 —
   작게 보이는 그림이라 여백을 넉넉히 주고 이름표는 아래에 띠로 깐다. */
.bcard{
  flex:none; width:66px; height:100px; border-radius:9px; cursor:pointer;
  border:1px solid rgba(0,0,0,.28); color:#231a10;
  background:linear-gradient(163deg,#f7efdc,#e6d8bb);
  box-shadow:0 2px 6px -2px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.45);
  display:grid; grid-template-rows:auto 1fr auto auto; gap:1px; padding:3px 3px 0;
  text-align:center; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease;
}
.bcard.sm{ width:56px; height:86px }
.bcard:hover{ transform:translateY(-4px) }
.bcard.on{ box-shadow:0 0 0 2px #e0b25c, 0 8px 16px -6px rgba(0,0,0,.6);
           transform:translateY(-7px) }
/* 버리려고 고른 카드 — 낼 카드를 고른 것과 다른 뜻이라 색을 달리한다 */
.bcard.drop{
  box-shadow:0 0 0 2px #e0705c, 0 6px 14px -6px rgba(0,0,0,.6);
  transform:translateY(-5px); filter:grayscale(.35);
}
.bcard[data-k="blue"]{ background:linear-gradient(163deg,#e4eef8,#c6d5e6) }
.bcard[data-k="gun"]{ background:linear-gradient(163deg,#f6e6d6,#e0c8ae) }
.bcard .suit{
  font-size:9px; font-weight:700; color:#5a5348; text-align:left;
  padding-left:2px; letter-spacing:-.02em;
}
.bcard .suit[data-red="1"]{ color:#b3423f }
.bcard .art{ width:100%; height:100%; min-height:0; align-self:center }
/* 수치 한 줄. 실제 카드가 그림 아래에 기호로만 적어두는 그 자리다. */
.bcard .btip{
  font-size:7.5px; line-height:1.35; font-weight:600; letter-spacing:-.03em;
  color:#6b5a44; margin:0 -3px; padding:1px 2px;
  white-space:nowrap; overflow:hidden; text-overflow:clip;
  border-top:1px solid rgba(59,36,22,.14);
}
.bcard[data-k="blue"] .btip{ color:#3f5573; border-top-color:rgba(30,52,80,.18) }
.bcard[data-k="gun"] .btip{ color:#6d4a2e }
.bcard .nm{
  font-size:9px; font-weight:700; line-height:1.5;
  margin:0 -3px; padding:1px 2px;
  background:rgba(59,36,22,.10); border-top:1px solid rgba(59,36,22,.18);
}
.bcard[data-k="blue"] .nm{ background:rgba(30,52,80,.12) }
.bcard.back{
  background:repeating-linear-gradient(45deg,#5b3a2e,#5b3a2e 4px,#6d4737 4px,#6d4737 8px);
  color:#c9a88f; cursor:default;
}
.bcard.back .bk{ align-self:center; font-size:16px; grid-row:1/-1 }

.bact{ display:flex; gap:5px; align-items:center; flex-wrap:wrap; min-height:30px }
/* 이름을 bhint 로 둔다 — 앱에는 이미 오목판의 .hint 가 있고, 그것은
   화면 아래에 떠 있는 절대위치 안내라 여기에 걸리면 글자가 판 밖으로 샌다. */
.bact .bhint{ color:#9fb6a6; font-size:11px }
/* 버려야 넘어가는 단계 — 여기서 뭘 해야 하는지 못 알아채면 판이 멈춘다 */
.bact[data-drop="1"] .bhint{ color:#f0b8a8; font-weight:600 }
.bact[data-drop="1"]::before{
  content:'버리기'; flex:none;
  font-size:10px; font-weight:700; letter-spacing:.04em;
  color:#e07a5c; border:1px solid #e07a5c; border-radius:999px;
  padding:2px 8px;
}
.bact .btn, .brow .btn{
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07);
  color:#e9efe9; border-radius:8px; padding:6px 11px; font-size:11.5px;
  cursor:pointer;
}
.bact .btn:hover, .brow .btn:hover{ background:rgba(255,255,255,.14) }
.bact .btn.primary, .brow .btn.primary{
  background:#e0b25c; border-color:#e0b25c; color:#20180c; font-weight:600;
}
.bact .btn.danger, .brow .btn.danger{ border-color:#e07a7a; color:#f0a8a8 }
.bact .btn:disabled, .brow .btn:disabled{ opacity:.4; cursor:default }

.bask{
  position:absolute; left:8px; right:8px; bottom:8px; z-index:6;
  background:rgba(16,26,20,.97); border:1px solid #e07a5c; border-radius:12px;
  padding:9px 11px; display:grid; gap:7px;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.8);
}
.bask .bh2{ font-size:13px; font-weight:600 }
.bask .timer{
  position:absolute; top:9px; right:12px; font-size:11px; color:#e0b25c;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
}
.brow{ display:flex; gap:6px; align-items:center }
.brow.wrap{ flex-wrap:wrap }
.bwait{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:5;
  background:rgba(16,26,20,.9); border:1px solid rgba(255,255,255,.14);
  border-radius:999px; padding:5px 14px; font-size:11px; color:#c6d6ca;
}

.blobby{
  margin:auto; max-width:420px; display:grid; gap:10px; text-align:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:18px;
}
.blobby h3{ margin:0; font-size:17px }
.blobby .note{ margin:0; font-size:11.5px; color:#9fb6a6; line-height:1.6 }
.bsits{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center }
.bsits .sit{
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  padding:4px 11px; font-size:11.5px;
}
.bsits .sit[data-me="1"]{ border-color:#e0b25c; color:#e0b25c }
.bsits .sit.empty{ color:#7d8f83; border-style:dashed }
.blobby .brow{ justify-content:center }

/* 낮은 가로 화면(휴대폰을 눕힌 경우). 위아래로 쌓으면 덱과 자리 카드가
   서로 밀고 들어와 겹친다 — 이때는 탁자 모양을 접고 옆으로 세운다. */
@media (max-height:470px){
  .btable{ flex-direction:row; align-items:stretch; gap:8px }
  /* 좁은 화면에서도 한 줄을 지킨다. 자리마다 폭을 줄이고, 그래도 모자라면
     옆으로 밀어 본다 — 접어서 거리 숫자를 헷갈리게 하는 것보다 낫다. */
  /* align-self 가 없으면 이 칸이 탁자 높이만큼 늘어나고, 자리 카드는
     align-items:end 를 따라 그 늘어난 칸의 바닥에 매달린다 — 화면
     한복판까지 내려와 위가 텅 빈다. 칸을 내용만큼만 두고 맨 위에 붙인다. */
  .bring{ flex:1; min-width:0; padding-top:10px; align-self:start;
          max-height:100%; grid-auto-columns:minmax(104px,1fr) }
  .bring > *{ transform:translateY(calc(var(--lift,0px) * .6)) }
  .bseat[data-me="1"]::after{ display:none }   /* 좁으면 이름만으로 충분하다 */
  /* 캐릭터 이름은 남긴다. 능력이 이름에 붙어 있어서, 얼굴만 보면 누가
     무엇을 하는 사람인지 매번 눌러 봐야 한다. 대신 작게 줄인다. */
  .bseat .ch{ font-size:9px; padding:1px 5px 1px 1px; gap:3px }
  .bseat .ch .face{ width:17px; height:17px }
  .bmid{ flex:none; width:148px; flex-direction:column; align-items:stretch }
  .bmid::before{ display:none }
  .bpile{ width:auto; align-self:stretch; padding:4px 6px }
  .bpile .n{ font-size:15px }
  .blog{ max-width:none; align-self:stretch; max-height:none }
  /* 좁은 곁칸에서는 기록과 대화가 높이를 나눠 갖는다. 대화에 고정
     높이를 주면 기록이 밀려 사라진다. */
  .bchat{ max-height:40%; min-height:44px }
  .blog .ln .fx{ display:none }        /* 좁은 곁칸에서는 효과까지 넣을 자리가 없다 */
  .bpile .art{ width:26px; height:26px }
  .bpile .btip{ display:none }
  .bcard{ width:58px; height:86px }
  .bcard .btip{ font-size:7px }
  .bhand{ min-height:86px }
  .bnote{ font-size:10.5px; min-height:20px }
}

/* 날아다니는 조각이 노는 층. 판이 다시 그려져도 살아남아야 하므로
   판 바깥에 두고, 손가락은 통과시킨다. */
.bfx{ position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden }
.bfx .tok{
  position:absolute; left:0; top:0; width:30px; height:30px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(246,236,214,.94);
  box-shadow:0 3px 10px -2px rgba(0,0,0,.65);
}
.bfx .tok .art{ width:22px; height:22px }

/* 가운데에 크게 나타나는 것 — 개틀링·잡화점·술집처럼 '불려나오는' 카드 */
.bfx .tok.big{
  background:rgba(246,236,214,.97); border-radius:18px;
  box-shadow:0 10px 30px -6px rgba(0,0,0,.75),
             0 0 0 2px rgba(224,178,92,.55);
}
.bfx .tok.big .art{ width:78%; height:78% }

/* 총알 — 그림이 아니라 짧은 빛줄기라야 빠르게 읽힌다 */
.bfx .tok.shotdot{
  width:16px; height:6px; border-radius:3px; background:#f6e2a8;
  box-shadow:0 0 8px 2px rgba(232,169,59,.7); border:0;
}
/* 굵은 총알 — 꼬리를 끌고 날아간다. 폭은 자바스크립트가 거리에 맞춰 준다. */
.bfx .tok.slug{
  height:12px; border-radius:6px; border:0;
  background:linear-gradient(90deg,
    rgba(246,226,168,0) 0%, rgba(246,226,168,.55) 34%,
    #fff6d8 78%, #fff 100%);
  box-shadow:0 0 16px 5px rgba(232,169,59,.72);
}
/* 화면을 가로지르는 것 — 마차처럼 지나가는 큰 그림 */
.bfx .tok.rush{
  border-radius:22px;
  box-shadow:0 16px 40px -8px rgba(0,0,0,.8),
             0 0 0 2px rgba(224,178,92,.5);
}
/* 위에서 떨어져 내려꽂히는 것 — 술통 */
.bfx .tok.drop{
  border-radius:20px;
  box-shadow:0 22px 48px -10px rgba(0,0,0,.85),
             0 0 0 3px rgba(160,112,58,.6);
}
/* 날아다니는 뒷면 카드 — 손패의 뒷면과 같은 무늬를 쓴다 */
.bfx .tok.cardback{
  width:26px; height:36px; border-radius:4px;
  background:repeating-linear-gradient(45deg,#5b3a2e,#5b3a2e 3px,#6d4737 3px,#6d4737 6px);
  border:1px solid rgba(255,255,255,.22); color:#c9a88f;
  display:grid; place-items:center;
  box-shadow:0 4px 12px -2px rgba(0,0,0,.7);
}
.bfx .tok.cardback .bk{ font-size:12px; line-height:1 }

/* 탄피 — 놋쇠 조각 하나 */
.bfx .tok.brass{
  width:7px; height:13px; border-radius:2px; border:0;
  background:linear-gradient(140deg,#f2d089,#c9973c 55%,#8a6320);
  box-shadow:0 0 5px rgba(232,169,59,.55);
}
/* 먼지·연기 */
.bfx .tok.smoke{
  width:60px; height:60px; border-radius:50%; border:0;
  background:radial-gradient(circle, rgba(228,220,200,.85) 0%,
                             rgba(206,192,164,.45) 45%,
                             rgba(206,192,164,0) 72%);
  box-shadow:none;
}
.bfx .tok.smoke[data-tone="gun"]{
  background:radial-gradient(circle, rgba(240,236,228,.9) 0%,
                             rgba(190,190,190,.4) 46%,
                             rgba(190,190,190,0) 72%);
}
.bfx .tok.smoke[data-tone="dust"]{
  background:radial-gradient(circle, rgba(214,184,132,.9) 0%,
                             rgba(184,152,102,.42) 46%,
                             rgba(184,152,102,0) 74%);
}
/* 화면 전체가 한 번 물든다 */
.bfx .tok.wash{
  left:0; top:0; width:100%; height:100%; border-radius:0; border:0;
  background:radial-gradient(circle at 50% 50%,
             rgba(255,214,140,.55) 0%, rgba(255,150,60,.22) 42%,
             rgba(0,0,0,0) 74%);
  box-shadow:none;
}
.bfx .tok.wash[data-tone="hit"]{
  background:radial-gradient(circle at 50% 50%,
             rgba(255,120,96,.42) 0%, rgba(180,40,30,.20) 45%,
             rgba(0,0,0,0) 75%);
}
.bfx .tok.wash[data-tone="heal"]{
  background:radial-gradient(circle at 50% 50%,
             rgba(125,255,180,.34) 0%, rgba(60,190,130,.16) 45%,
             rgba(0,0,0,0) 75%);
}
.bfx .tok.wash[data-tone="dust"]{
  background:radial-gradient(circle at 50% 50%,
             rgba(196,164,112,.44) 0%, rgba(120,96,60,.24) 48%,
             rgba(0,0,0,0) 78%);
}
.bfx .tok.wash[data-tone="gun"]{
  background:radial-gradient(circle at 50% 50%,
             rgba(255,226,168,.40) 0%, rgba(200,150,60,.18) 46%,
             rgba(0,0,0,0) 76%);
}
/* 다이너마이트 — 심지 끝에서 불씨가 기어간다 */
.bfx .tok.fuse{ box-shadow:0 12px 34px -6px rgba(0,0,0,.8),
                           0 0 0 3px rgba(224,92,60,.6) }
.bfx .tok.fuse b{
  position:absolute; left:50%; top:50%; width:16%; height:16%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,#fff8d0 0%,#ffb43c 40%,
                             rgba(255,120,40,0) 72%);
  box-shadow:0 0 18px 7px rgba(255,170,60,.85);
}

/* 주사기 — 날아가 꽂힌다. 안의 약이 밀려 들어가는 것은 b 가 맡는다. */
.bfx .tok.needle{
  background:none; box-shadow:none; border-radius:0;
}
.bfx .tok.needle .art{ width:100%; height:100%;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7)) }
.bfx .tok.needle b{
  position:absolute; left:38%; top:40%; width:20%; height:20%;
  transform-origin:left center; border-radius:2px;
  background:linear-gradient(90deg,#e04a3a,#ff7a5c);
  box-shadow:0 0 10px rgba(224,74,58,.7);
}

/* 총구 불꽃 */
.bfx .tok.spark{
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle,#fff2c4 0%,#e8a93b 45%,rgba(232,169,59,0) 72%);
  box-shadow:none;
}
/* 터짐 — 맞았을 때 퍼지는 고리. 무슨 일인지에 따라 색이 다르다 */
.bfx .tok.ring{
  width:52px; height:52px; border-radius:50%; background:none;
  border:3px solid #e0705c; box-shadow:0 0 12px rgba(224,112,92,.5);
}
.bfx .tok.ring[data-tone="heal"]{ border-color:#7dffb4;
                                  box-shadow:0 0 12px rgba(125,255,180,.5) }
.bfx .tok.ring[data-tone="take"]{ border-color:#e0b25c;
                                  box-shadow:0 0 12px rgba(224,178,92,.5) }
.bfx .tok.ring[data-tone="gear"]{ border-color:#8fb6e0;
                                  box-shadow:0 0 12px rgba(143,182,224,.5) }
.bfx .tok.ring[data-tone="iron"]{ border-color:#b4c0cb;
                                  box-shadow:0 0 12px rgba(180,192,203,.5) }
.bfx .tok.ring[data-tone="boom"]{ border-color:#ffca6a; border-width:5px;
                                  box-shadow:0 0 22px rgba(255,202,106,.75) }

/* 감옥 — 자리 전체에 창살이 내려온다 */
.bseat{ position:relative }
.bseat[data-jail="1"]{ border-color:rgba(147,161,174,.5) }
.bseat .jail{
  position:absolute; inset:0; border-radius:10px; overflow:hidden;
  pointer-events:none; background:rgba(20,26,32,.42);
  display:flex; justify-content:space-evenly; align-items:stretch;
}
.bseat .jail .bar{
  width:7px; background:linear-gradient(90deg,#6B7885,#B4C0CB 40%,#5E6B77);
  border-left:1px solid rgba(0,0,0,.45); border-right:1px solid rgba(0,0,0,.45);
}
.bseat .jail .lock{
  position:absolute; left:0; right:0; bottom:4px; text-align:center;
  font-size:9.5px; font-weight:600; color:#dfe7ee;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
/* 철컹 — 창살이 위에서 떨어져 한 번 튄다 */
.bseat .jail[data-slam="1"]{ animation:jail-slam .42s cubic-bezier(.3,1.5,.5,1) both }
.bseat .jail[data-slam="1"] .lock{ animation:jail-word .5s .28s both }
@keyframes jail-slam{
  0%{ transform:translateY(-100%); opacity:.2 }
  62%{ transform:translateY(6%) }
  82%{ transform:translateY(-3%) }
  100%{ transform:translateY(0); opacity:1 }
}
@keyframes jail-word{ from{ opacity:0 } to{ opacity:1 } }

/* 규칙 요약 — 접었다 펼 수 있게. 처음 하는 사람이 판을 보면서 확인한다. */
.bact .btn.help{ margin-left:auto; opacity:.8 }
.bact .btn.help:hover{ opacity:1 }
.bhelp{
  position:absolute; inset:0; z-index:8; display:grid; place-items:center;
  background:rgba(8,14,11,.72); padding:10px;
}
.bhelp .c{
  display:flex; flex-direction:column; min-height:0;
  width:min(560px,100%); max-height:100%;
  background:#16211a; border:1px solid rgba(255,255,255,.16);
  border-radius:14px; box-shadow:0 22px 52px -18px rgba(0,0,0,.85);
}
.bhelp .h{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.10);
}
.bhelp .h b{ font-size:14px }
.bhelp .h .n{ flex:1; font-size:10.5px; color:#8fa696 }
.bhelp .h .btn{ padding:5px 12px; font-size:11.5px }
.bhelp .b{ flex:1; min-height:0; overflow-y:auto; padding:4px 0 8px }
.bhelp .sec{ border-bottom:1px solid rgba(255,255,255,.06) }
.bhelp .sec .t{
  width:100%; display:flex; align-items:center; gap:7px;
  padding:9px 12px; background:transparent; border:0; cursor:pointer;
  color:#e9efe9; font:inherit; font-size:12.5px; font-weight:600;
  text-align:left;
}
.bhelp .sec .t:hover{ background:rgba(255,255,255,.05) }
.bhelp .sec .t .ar{ color:#e0b25c; font-size:11px; width:11px; flex:none }
.bhelp .ls{ padding:0 12px 8px 30px; display:grid; gap:5px }
.bhelp .r{ display:flex; gap:8px; font-size:11.5px; line-height:1.5 }
.bhelp .r b{ flex:none; min-width:84px; color:#e0b25c; font-weight:600 }
.bhelp .r span{ color:#c6d6ca }
@media (max-height:470px){
  .bhelp .sec .t{ padding:6px 10px; font-size:11.5px }
  .bhelp .r{ font-size:10.5px }
  .bhelp .r b{ min-width:70px }
  .bhelp .ls{ padding:0 10px 6px 26px; gap:3px }
}

.bover{
  position:absolute; inset:0; z-index:8; display:grid; place-items:center;
  background:rgba(8,14,11,.82);
}
.boc{
  background:#16211a; border:1px solid rgba(255,255,255,.14); border-radius:16px;
  padding:20px 26px; text-align:center; display:grid; gap:8px;
}
.boc .v{ margin:0; font-size:22px; font-weight:700; color:#e0b25c }
.boc .d{ margin:0; font-size:13px; color:#c6d6ca }
.boc .rr{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-top:4px }
.boc .brow{ display:flex; gap:8px; justify-content:center; margin-top:6px }
.boc .btn{ padding:8px 20px }
.boc .r1{
  font-size:11px; color:#9fb6a6; border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:3px 9px;
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* 앱으로 설치 — 있을 때만 나타나므로 자리를 미리 비워두지 않는다.
   설정·관리자와 같은 mini 를 쓰되, 권하는 것이라 살짝 밝게 둔다. */
.mini.install{
  border-color:var(--accent); color:var(--accent); font-weight:700;
}
.mini.install:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent) }

/* ── 환경설정 묶음 ──
   여덟 가지가 평평하게 늘어서 있으면 폰에서는 무엇이 무엇인지 안 읽히고
   끝없이 스크롤된다. 하는 일끼리 묶고, 안 쓰는 묶음은 접을 수 있게 한다.
   처음에는 모두 펴 둔다 — 접어 두면 있는 줄도 모르는 설정이 생긴다. */
.set-sec{
  border:1px solid var(--line); border-radius:12px;
  margin:10px 0; background:color-mix(in srgb, var(--surface) 60%, transparent);
  overflow:hidden;
}
.set-sec > summary{
  cursor:pointer; list-style:none; user-select:none;
  padding:11px 14px; font-size:13.5px; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.set-sec > summary::-webkit-details-marker{ display:none }
/* 접힘 표시는 직접 그린다. 기본 삼각형은 기기마다 모양이 달라 들쭉날쭉하다. */
.set-sec > summary::after{
  content:''; margin-left:auto; width:8px; height:8px; flex:none;
  border-right:2px solid var(--text-mute); border-bottom:2px solid var(--text-mute);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease;
}
.set-sec[open] > summary::after{ transform:rotate(-135deg) translate(-2px,-2px) }
.set-sec > summary:hover{ background:color-mix(in srgb, var(--text) 6%, transparent) }
/* 묶음 안에서는 칸끼리 선을 긋지 않는다 — 묶음 테두리가 이미 경계다 */
.set-sec .set-row{ border:0; padding:2px 14px 12px }
.set-sec .set-row + .set-row{ border-top:1px solid var(--line); padding-top:12px }

/* 폰에서는 여백을 줄여 한 화면에 더 들어오게 한다 */
@media (max-width:520px){
  .set-sec{ margin:8px 0 }
  .set-sec > summary{ padding:10px 12px; font-size:13px }
  .set-sec .set-row{ padding:2px 12px 10px }
  .set-sec .set-note{ font-size:11px; line-height:1.5 }
}

/* ── 1:1 대화 ──
   전체 대화와 사람별 대화를 탭으로 오간다. 상대가 없으면 탭 자체가
   안 나온다 — 쓸 일 없는 줄이 자리를 차지할 이유가 없다. */
.chat-tabs{
  display:flex; gap:4px; padding:6px 8px 0; overflow-x:auto;
  border-bottom:1px solid var(--line);
}
.chat-tab{
  flex:none; display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:9px 9px 0 0; cursor:pointer;
  font-size:12px; font-family:inherit; color:var(--text-mute);
  background:transparent; border:1px solid transparent; border-bottom:0;
  max-width:9em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-tab:hover{ color:var(--text) }
.chat-tab.on{
  color:var(--text); background:var(--surface);
  border-color:var(--line); font-weight:700;
}
.chat-tab .k{
  font-size:9px; font-weight:800; line-height:14px; padding:0 5px;
  border-radius:999px; background:var(--accent); color:#0d1512;
}
/* 귓속말을 쓰는 중이라는 표시 — 어디로 가는지 늘 보이게 */
.chat-form[data-dm="1"] .field{ border-color:var(--accent) }

/* 접속자를 눌렀을 때 — 대화와 대국을 함께 고른다 */
.ask-sep{
  margin:10px 0 6px; font-size:11.5px; color:var(--text-mute);
  text-align:center;
}