* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  /* 라이트=light(삼성이 only light는 무시하므로 표준값 light로), 다크=dark(html.dark에서). */
  color-scheme: light;
  --bg:#f3f4fb; --panel:#ffffff; --border:#e6e7ef;
  --text:#1f2330; --muted:#8a90a2;
  --accent:#5b6ef5; --accent-2:#7c8bff; --ok:#3a8a5f; --danger:#e0564f; --gold:#f0b429;
}
html.dark{ color-scheme: dark; }
html,body{ height:100%; }
body{
  position:fixed; inset:0; overflow:hidden; width:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
}
.hidden{ display:none !important; }
.muted{ color:var(--muted); font-size:.85rem; }
.spacer{ flex:1; }
button{ font-family:inherit; cursor:pointer; min-height:32px; }

.screen{ position:fixed; inset:0; display:flex; flex-direction:column; }

/* ── 공통 상단바 ── */
.topbar{ display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--border); background:var(--panel); }
.icon-btn{ border:0; background:transparent; font-size:1.25rem; cursor:pointer; padding:4px 8px; border-radius:8px; }
.icon-btn:hover{ background:#f0f1f8; }
.room-title{ font-weight:700; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sec-title{ font-size:1rem; margin:18px 4px 10px; }
.logo{ font-weight:800; font-size:1.15rem; }

/* ── 승인 대기 ── */
.gate{ align-items:center; justify-content:center; background:linear-gradient(160deg,#6a7bff,#9aa6ff); padding:24px; }
.gate-card{ background:#fff; border-radius:24px; padding:36px 28px; max-width:340px; width:100%;
  text-align:center; box-shadow:0 20px 60px rgba(40,50,120,.25); }
.gate-emoji{ font-size:52px; }
.gate-card h1{ margin:12px 0 8px; font-size:1.5rem; }
.gate-card p{ color:var(--muted); line-height:1.6; }
.gate-code{ margin:20px 0 6px; font-size:1.05rem; }
.gate-code span{ font-weight:800; letter-spacing:4px; font-size:1.7rem; color:var(--accent); }
.gate-req-btn{ display:block; width:100%; margin:20px 0 4px; padding:14px 16px; border:0; border-radius:14px;
  background:var(--accent); color:#fff; font-size:1.1rem; font-weight:800; cursor:pointer;
  box-shadow:0 8px 20px rgba(91,110,245,.3); }
.gate-req-btn:disabled{ opacity:.6; cursor:default; }
.gate-req-btn.hidden{ display:none; }
.gate-devlink{ display:inline-block; margin-top:16px; font-size:.8rem; color:#bbb; }

/* ── 프로필 선택 ── */
.ph-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); background:var(--panel); }
.ph-body{ flex:1; overflow-y:auto; padding:20px 16px; max-width:680px; width:100%; margin:0 auto; }
.ph-body h2{ text-align:center; margin-bottom:22px; }
.profile-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:16px; }
.prof-card{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px;
  background:var(--panel); border:1px solid var(--border); border-radius:18px; cursor:pointer; position:relative; }
.prof-card:hover{ border-color:var(--accent); transform:translateY(-2px); transition:.12s; }
.prof-card .name{ font-weight:700; font-size:.92rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prof-card.add{ justify-content:center; color:var(--muted); border-style:dashed; }
.avatar{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:34px; overflow:hidden; flex-shrink:0; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar.sm{ width:40px; height:40px; font-size:22px; }
.avatar.xs{ width:30px; height:30px; font-size:17px; }

/* ── 로비 ── */
.me-chip{ display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--panel);
  border-radius:20px; padding:4px 12px 4px 4px; font-weight:700; font-size:.9rem; }
.lobby-body{ flex:1; overflow-y:auto; padding:6px 16px 24px; max-width:760px; width:100%; margin:0 auto; }
/* 게임 종류 = 가로형 행(세로로 나열) — 정사각형 그리드 폐기 */
.game-grid{ display:flex; flex-direction:column; gap:10px; }
.game-card{ display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px 14px; cursor:pointer; }
.game-card:hover{ border-color:var(--accent); }
.game-card .gc-emoji{ font-size:30px; flex-shrink:0; width:42px; text-align:center; }
.game-card .gc-main{ flex:1; min-width:0; }
.game-card .gc-namerow{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.game-card .gc-name{ font-weight:800; }
.game-card .gc-players{ font-size:.72rem; font-weight:800; color:var(--accent); background:#eef0ff; border-radius:20px; padding:0 8px; display:inline-flex; align-items:center; height:20px; overflow:hidden; line-height:1; }
html.dark .game-card .gc-players{ background:#283142; }
.game-card .gc-mode-label{ color:#2a8a3a; background:#e8ffe8; }
html.dark .game-card .gc-mode-label{ background:#1a2e1a; color:#5ec96a; }
.game-card .gc-tag{ color:var(--muted); font-size:.8rem; margin-top:2px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-card .gc-live{ flex-shrink:0; font-size:.74rem; color:var(--accent); font-weight:700; text-align:right; max-width:96px; }
/* 열린 방: 최대 2개만 보이고 그 이상은 스크롤 */
.room-list-lobby{ display:flex; flex-direction:column; gap:10px; max-height:150px; overflow-y:auto; }
.room-card{ display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:12px 14px; cursor:pointer; }
.room-card:hover{ border-color:var(--accent); }
.room-card .rc-emoji{ font-size:26px; }
.room-card .rc-main{ flex:1; min-width:0; }
.room-card .rc-title{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-card .rc-sub{ color:var(--muted); font-size:.8rem; margin-top:2px; }
.badge{ font-size:.72rem; font-weight:800; padding:3px 9px; border-radius:20px; }
.badge.wait{ background:#e8ffe8; color:#2a8a3a; }
.badge.play{ background:#ffeede; color:#c4732a; }
.badge.full{ background:#eee; color:#888; }
.empty-hint{ color:var(--muted); text-align:center; padding:24px; font-size:.9rem; }

/* ── 방 ── */
.room-wait{ flex:1; overflow-y:auto; padding:12px 16px; max-width:680px; width:100%; margin:0 auto; }
.member-list{ display:flex; flex-direction:column; gap:8px; }
.member-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--panel);
  border:1px solid var(--border); border-radius:12px; }
.member-row .m-name{ flex:1; font-weight:600; }
.member-row .host-tag{ font-size:.7rem; background:var(--gold); color:#fff; padding:2px 7px; border-radius:10px; }
.member-row .ready-tag{ font-size:.78rem; font-weight:800; }
.member-row .ready-tag.yes{ color:var(--ok); }
.member-row .ready-tag.no{ color:var(--muted); }
.member-row .kick{ border:0; background:transparent; color:var(--danger); opacity:.6; font-size:.8rem; }
.member-row.off{ opacity:.45; }
.team-pick-btn{ border:1.5px solid var(--border); background:transparent; border-radius:8px; padding:2px 9px; font-size:.75rem; font-weight:700; cursor:pointer; color:var(--text); }
.team-pick-btn.active-a{ background:#ef4444; color:#fff; border-color:#ef4444; }
.team-pick-btn.active-b{ background:#3b82f6; color:#fff; border-color:#3b82f6; }
.team-badge{ font-size:.72rem; font-weight:800; padding:2px 8px; border-radius:10px; }
.team-badge.team-A{ background:#fecaca; color:#b91c1c; }
.team-badge.team-B{ background:#bfdbfe; color:#1d4ed8; }
.team-badge.team-none{ background:var(--bg2); color:var(--muted); }
.settings-box{ margin-top:16px; }
.setting-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
  background:var(--panel); border:1px solid var(--border); border-radius:12px; margin-bottom:8px; }
.setting-line select{ font:inherit; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--panel); color:var(--text); }
.ready-bar{ padding:14px 0; display:flex; gap:10px; flex-wrap:wrap; }
.big-btn{ flex:1; border:0; border-radius:14px; background:var(--accent); color:#fff; font-size:1.1rem;
  font-weight:800; padding:15px; }
.big-btn.on{ background:var(--ok); }
.big-btn.start{ background:var(--gold); }
.big-btn:disabled{ opacity:.5; }

/* ── 게임 화면: 한 화면에 꽉(노스크롤). 단일 상단 스트립(전원 한 줄) + 게임판(아래 flex:1) ── */
.game-view{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; padding:5px 6px; }
.game-root{ flex:1; min-height:0; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
/* 좌석 바(단일 상단 스트립 #seatTop): 전원 한 줄 — 번호/돌기호·아바타·닉네임 + 현재 차례 강조.
   #seatMe 는 자리표시(빈 칸)로만 남김 → :empty 로 화면에서 사라짐(onecard/gostop hideShellSeats 호환용). */
.seat-bar{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; padding:3px 2px; flex-shrink:0; }
.seat-bar:empty{ display:none; }
.seat-chip{ display:flex; align-items:center; gap:5px; padding:3px 11px 3px 4px; border-radius:22px; background:var(--panel); border:2px solid var(--border); transition:.15s; }
.seat-chip.cur{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,110,245,.4); transform:translateY(-1px); }
html.dark .seat-chip.cur{ background:#283142; }
.sc-num{ width:19px; height:19px; border-radius:50%; background:var(--muted); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.seat-chip.cur .sc-num{ background:var(--accent); }
/* J) 좌석 돌 기호(⚫/⚪): 번호 동그라미 대신 돌 모양만(배경 없이 글리프 크게) */
.sc-num.sc-badge{ width:auto; height:auto; min-width:18px; background:transparent; color:inherit; font-size:15px; line-height:1; }
.seat-chip.cur .sc-num.sc-badge{ background:transparent; }
.sc-name{ font-size:.82rem; font-weight:700; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seat-chip.me .sc-name{ color:var(--accent); }
/* 관전 모드: 좌석칩을 클릭해 그 사람/봇 시점으로 보기(선택칩 강조). 비관전자는 비활성 */
.seat-chip.pickable{ cursor:pointer; }
.seat-chip.pickable:hover{ border-color:var(--accent-2); }
.seat-chip.viewing{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(240,180,41,.45); }
/* 관전 지속 배지(상단 고정): 토스트가 아니라 항상 보임 */
.spec-bar{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  padding:6px 12px; background:#3a2f00; color:#ffe08a; font-weight:800; font-size:.85rem;
  border-bottom:2px solid var(--gold); flex-shrink:0; }
.spec-bar .spec-eye{ white-space:nowrap; }
.spec-bar .spec-view{ font-weight:700; opacity:.92; }
html.dark .spec-bar{ background:#2a2200; color:#ffe9a8; }
.big-btn.ghost{ background:var(--panel); color:var(--muted); border:1px solid var(--border); }
/* 훈수 버튼(봇과 할 때 내 차례에) + 설명 바 */
/* ★훈수 버튼 = 방 상단바(.topbar) 상주 아이콘(💡, 📖 왼쪽). 셸(app.js)만 관리 — 게임은 안 건드림.
   적용 게임이면 항상 보이고(.hidden 안 붙음), 내 차례일 때만 또렷(enabled),
   아닐 땐 회색·클릭불가(:disabled)지만 계속 보임. 훈수 켜짐 = 아이콘 강조(.on). */
.hint-btn{ flex:0 0 auto; }
.hint-btn.on{ background:#ffe08a; box-shadow:0 0 0 2px var(--gold); }
html.dark .hint-btn.on{ background:#3a3320; }
.hint-btn:disabled{ opacity:.38; cursor:default; }
.hint-btn:disabled:hover{ background:transparent; }
/* 훈수 팁: 버튼이 상단우측이므로 버튼 '아래'에 뜨게(top 으로 배치 — JS 가 버튼 rect 기준 top 계산). */
.hint-bar{ position:fixed; left:50%; transform:translateX(-50%); top:56px; z-index:39;
  max-width:min(520px,92vw); background:#fff8e3; border:2px solid #f5b301; color:#5a4500;
  border-radius:12px; padding:9px 13px; font-weight:700; font-size:.92rem; line-height:1.45; text-align:left;
  box-shadow:0 6px 20px rgba(0,0,0,.2); }
html.dark .hint-bar{ background:#3a3320; color:#ffe9a8; }
/* 봇 추가 행(참가자 아래) — 멤버행처럼 [봇이미지·이름(봇N)·난이도·추가] 한 줄 고정(줄바꿈 금지) */
.bot-add-row{ display:flex; align-items:center; gap:6px; padding:8px 10px; margin-top:8px;
  background:var(--panel); border:1px dashed var(--border); border-radius:12px; flex-wrap:nowrap; overflow:hidden; }
.bot-add-row .bot-ava{ background:#eef0ff; flex-shrink:0; }
html.dark .bot-add-row .bot-ava{ background:#283142; }
.bot-add-row .m-name{ flex:1 1 auto; font-weight:700; min-width:28px; font-size:.9rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }   /* 이름은 짧음 → 남는 폭을 먹어 난이도·버튼을 오른쪽으로 밀되, 좁으면 줄임표 */
.bot-add-btn{ border:0; border-radius:10px; background:var(--accent); color:#fff; font-weight:800; padding:9px 12px; font-size:.85rem; flex-shrink:0; white-space:nowrap; }
.botlevel-seg{ display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; flex-shrink:0; }
.botlevel-seg button{ border:0; background:var(--panel); color:var(--muted); padding:8px 9px; font-weight:800; font-size:.8rem; cursor:pointer; white-space:nowrap; min-height:30px; }
.botlevel-seg button.on{ background:var(--accent); color:#fff; }

/* ── 방 참여자/관전자 고정 탭 ── */
.room-tabs{ display:flex; gap:8px; margin:14px 0 12px; }
.room-tab{ flex:1; border:1px solid var(--border); background:var(--panel); color:var(--muted);
  border-radius:12px; padding:9px 10px; font-weight:800; font-size:.95rem; display:flex; align-items:center;
  justify-content:center; gap:7px; }
.room-tab.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
.room-tab .tab-badge{ font-size:.78rem; font-weight:900; background:rgba(0,0,0,.12); color:inherit;
  border-radius:20px; padding:1px 8px; min-width:22px; }
.room-tab.on .tab-badge{ background:rgba(255,255,255,.28); }
.tab-pane{ display:block; }
.spec-tag{ font-size:.74rem; font-weight:800; color:var(--muted); }
.member-row.spectator{ border-style:dashed; }
.empty-pane{ color:var(--muted); text-align:center; padding:18px; font-size:.88rem; }

/* ── 방장 위임 모달(나가기 시 다음 방장 고르기) ── */
.handoff-list{ display:flex; flex-direction:column; gap:8px; margin:6px 0 14px; max-height:46vh; overflow-y:auto; }
.handoff-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--bg);
  border:2px solid var(--border); border-radius:12px; cursor:pointer; }
.handoff-row:hover{ border-color:var(--accent); }
.handoff-row .h-name{ flex:1; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.handoff-row .h-role{ font-size:.74rem; font-weight:800; color:var(--muted); }
.handoff-actions{ display:flex; gap:10px; }
.handoff-actions button{ flex:1; }
/* ── 결과 = 글자만(이모티콘 없음) + 화면 정중앙. 진한 검정 외곽선(라이트/다크/펠트 등 어떤 배경에서도 또렷) + 하단 작은 버튼(기권 위치) ── */
/* ★결과 머리말(이겼어요/졌어요)은 '위쪽'에 둔다 — 고스톱 점수계산 패널(보드 중앙)과 겹치지 않게.
   버튼(계속하기/게임방으로/나가기)은 하단 고정. 가운데는 게임별 정산패널이 보이도록 비워 둔다. */
.result-overlay{ position:fixed; inset:0; z-index:60; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; padding:30px 24px 24px; pointer-events:none; background:transparent; }
.result-text{ text-align:center; pointer-events:none; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.result-wait{ margin-top:14px; font-size:1.0rem; font-weight:800; color:#fff; pointer-events:none;
  text-shadow:-1.2px -1.2px 0 #000, 1.2px -1.2px 0 #000, -1.2px 1.2px 0 #000, 1.2px 1.2px 0 #000, 0 2px 6px rgba(0,0,0,.5); }
.result-wait.hidden{ display:none; }
.r-head{ font-size:2.4rem; font-weight:900; letter-spacing:.5px;
  text-shadow:-1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 3px 9px rgba(0,0,0,.55); }
.result-text.win .r-head{ color:#ffd23f; }
.result-text.lose .r-head{ color:#ff8585; }
.result-text.draw .r-head{ color:#9fb0ff; }
.r-rank{ margin-top:14px; display:flex; flex-direction:column; gap:3px; }
.r-rank-row{ font-size:1.05rem; font-weight:800; color:#fff;
  text-shadow:-1.2px -1.2px 0 #000, 1.2px -1.2px 0 #000, -1.2px 1.2px 0 #000, 1.2px 1.2px 0 #000, 0 2px 6px rgba(0,0,0,.5); }
.r-rank-row.me{ color:#ffd23f; }
.result-actions{ position:absolute; left:0; right:0; bottom:26px; display:flex; justify-content:center;
  flex-wrap:wrap; gap:10px; padding:0 12px; pointer-events:auto; }
.res-btn{ border:0; border-radius:16px; padding:11px 18px; font-size:1.0rem; font-weight:800;
  box-shadow:0 3px 12px rgba(0,0,0,.3); cursor:pointer; white-space:nowrap; }
/* 출구 3분리: [계속하기]=강조색(파랑) / [게임방으로]=금색 외곽(방에 남음) / [나가기]=중립(빨강 글자, 방 떠남) */
.res-btn.rematch{ background:var(--accent); color:#fff; }
.res-btn.towait{ background:var(--panel); color:var(--text); border:2px solid var(--gold); }
.res-btn.leave{ background:var(--panel); color:var(--danger); border:1px solid var(--border); }
html.dark .res-btn.towait{ background:#2a3140; color:#ffe9a8; }
html.dark .res-btn.leave{ background:#2a3140; }

/* ── 시트 / 모달 / 토스트 ── */
.sheet{ position:fixed; inset:0; z-index:55; background:var(--bg); display:flex; flex-direction:column; }
.sheet-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); background:var(--panel); }
.sheet-title{ font-weight:700; flex:1; }
.sheet-body{ flex:1; overflow-y:auto; padding:18px; max-width:620px; width:100%; margin:0 auto; line-height:1.6; }
.sheet-body ul{ padding-left:1.2em; } .sheet-body li{ margin:.3em 0; }
.sheet-body h3{ margin:.4em 0 .5em; }

.modal{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:18px; }
.modal-card{ background:var(--panel); border-radius:18px; padding:22px; max-width:380px; width:100%; max-height:90vh; overflow-y:auto; }
.modal-card h3{ margin-bottom:14px; }
.fld{ display:block; margin-bottom:16px; font-size:.9rem; color:var(--muted); }
.fld input[type=text]{ width:100%; margin-top:6px; border:1px solid var(--border); border-radius:10px; padding:10px 12px; font:inherit; font-size:1rem; background:var(--panel); color:var(--text); }
.avatar-preview{ width:80px; height:80px; border-radius:50%; background:#ffd6e7; display:flex; align-items:center; justify-content:center;
  font-size:42px; margin:10px auto; overflow:hidden; }
.avatar-preview img{ width:100%; height:100%; object-fit:cover; }
.emoji-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:4px; margin:8px 0; }
.emoji-grid button{ font-size:22px; border:1px solid transparent; border-radius:8px; background:transparent; padding:4px; }
.emoji-grid button.sel{ border-color:var(--accent); background:#eef0ff; }
.bg-grid{ display:flex; gap:6px; justify-content:center; margin:8px 0; }
.bg-grid button{ width:28px; height:28px; border-radius:50%; border:2px solid transparent; }
.bg-grid button.sel{ border-color:var(--accent); }
.mini-btn{ border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:10px; padding:9px 14px; font-size:.9rem; }
.mini-btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.mini-btn.danger{ color:var(--danger); }
.modal-actions{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.link-open-btn{ display:block; margin:14px auto 0; background:transparent; }
.link-tabs{ display:flex; gap:6px; margin-bottom:14px; }
.link-tab{ flex:1; border:1px solid var(--border); background:var(--bg); color:var(--muted); border-radius:10px; padding:8px; font-size:.86rem; }
.link-tab.on{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700; }
.link-ok-btn{ display:block; width:100%; margin-top:10px; }
.muted.small{ font-size:.8rem; }
.link-code-box{ text-align:center; margin-top:12px; }
.link-code{ font-size:2rem; font-weight:800; letter-spacing:.25em; color:var(--accent); margin-bottom:4px; }
.link-code-input{ width:100%; text-align:center; font-size:1.5rem; letter-spacing:.3em; border:1px solid var(--border); border-radius:10px; padding:10px; margin:10px 0; background:var(--panel); color:var(--text); }
.prof-stats{ background:var(--bg); border-radius:12px; padding:12px; margin-bottom:14px; }
.prof-stats .ps-title{ font-weight:800; font-size:.92rem; margin-bottom:8px; }
.ps-row{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-size:.86rem; border-bottom:1px dashed var(--border); }
.ps-row .ps-val{ color:var(--accent); font-weight:700; }

/* 관리자 패널 */
.adm-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--panel); border:1px solid var(--border); border-radius:12px; margin-bottom:8px; }
.adm-info{ flex:1; min-width:0; }
.adm-label{ font-weight:700; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adm-sub{ color:var(--muted); font-size:.82rem; margin-top:2px; }
.status-badge{ font-size:.74rem; font-weight:800; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.status-badge.st-wait{ background:#fff3c4; color:#a06a00; }
.status-badge.st-ok{ background:#e3ffd6; color:#2a8a3a; }
.status-badge.st-deny{ background:#ffe0e0; color:#c43a3a; }
.status-badge.st-exp{ background:#eceef3; color:#888; }
html.dark .status-badge.st-wait{ background:#5a4a16; color:#ffd87a; }
html.dark .status-badge.st-ok{ background:#1f4326; color:#9be6a8; }
html.dark .status-badge.st-deny{ background:#4a2024; color:#ff9aa0; }
html.dark .status-badge.st-exp{ background:#2a3140; color:#9aa3b2; }
/* 요청기록·승인된기기 기기정보 줄(제품명/고유번호)은 ellipsis 강제 안 함(전체 보이게 wrap 허용) */
.adm-row .adm-sub{ white-space:normal; word-break:break-all; }
/* 승인된 기기 — 탭하면 캐릭터 목록 펼치기 */
.adm-dev{ margin-bottom:8px; }
.adm-dev .adm-row{ margin-bottom:0; }
.adm-tap{ cursor:pointer; }
.adm-toggle{ color:var(--accent); font-weight:700; margin-top:4px; }
.adm-chars{ border:1px solid var(--border); border-top:0; border-radius:0 0 12px 12px;
  background:var(--bg); padding:8px 12px; margin:-2px 0 0; }
.adm-char{ display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px dashed var(--border); }
.adm-char:last-child{ border-bottom:0; }
.adm-char-info{ flex:1; min-width:0; }
.adm-char-name{ font-weight:700; font-size:.92rem; }
/* 여러 기기에 연결(링크)된 캐릭터 배지 — 파스텔 보라 */
.share-badge{ display:inline-block; margin-left:6px; font-size:.7rem; font-weight:800;
  padding:2px 8px; border-radius:20px; background:#e8d6ff; color:#7a3ad6;
  white-space:nowrap; vertical-align:middle; }
html.dark .share-badge{ background:#3a2a5a; color:#c9a8ff; }

.toast{ position:fixed; left:50%; bottom:40px; transform:translateX(-50%); background:#333; color:#fff;
  padding:11px 18px; border-radius:12px; font-size:.9rem; z-index:80; max-width:84%; text-align:center; }
/* 로비 헤더 타이틀("게임 고르기") + 버전 태그 — 탭하면 강제 최신화 */
.room-title.ver{ border:0; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.room-title.ver .ver-tag{ font-size:.7rem; font-weight:700; color:var(--muted); margin-left:6px; }

/* ── 테마 3택 토글(밝게/어둡게/기기설정) — 하나 누르면 그것만 선택됨 ── */
.theme-seg{ display:inline-flex; border:1px solid var(--border); border-radius:13px; overflow:hidden; flex-shrink:0; background:var(--panel); }
.theme-seg button{ border:0; background:transparent; font-size:14px; padding:5px 8px; cursor:pointer; line-height:1; min-height:30px; opacity:.5; }
.theme-seg button.on{ background:var(--accent); opacity:1; }
.theme-seg button+button{ border-left:1px solid var(--border); }

/* ── ☰ 왼쪽 드로어(소리 · 테마) — chat .sidebar 패턴(왼쪽 슬라이드 + 딤) ── */
.drawer-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:65; }
.drawer-overlay.show{ display:block; }
.drawer{ position:fixed; inset:0 auto 0 0; width:min(78vw,300px); background:var(--panel);
  border-right:1px solid var(--border); z-index:70; transform:translateX(-100%);
  transition:transform .25s ease; box-shadow:0 0 40px rgba(0,0,0,.2);
  display:flex; flex-direction:column; }
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px; border-bottom:1px solid var(--border); }
.drawer-body{ padding:14px; display:flex; flex-direction:column; gap:12px; }
.drawer-row{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; background:var(--bg); border:1px solid var(--border); border-radius:14px; }
.drawer-label{ font-weight:700; font-size:.98rem; }
.drawer-toggle{ border:1px solid var(--border); background:var(--panel); border-radius:12px;
  font-size:1.2rem; padding:5px 12px; cursor:pointer; line-height:1; }
.drawer-toggle:hover{ background:#f0f1f8; }
html.dark .drawer-toggle:hover{ background:#283142; }

/* ── 다크 모드 ── */
html.dark{ --bg:#161a22; --panel:#1d2430; --border:#2c3442; --text:#e8eaf0; --muted:#9aa3b2; }
html.dark .icon-btn:hover,html.dark .game-card:hover{ background:#283142; }
html.dark .badge.full{ background:#2a3140; color:#9aa3b2; }