/* =====================================================================
   이뭔그 (이게 뭔 그림인데?) — style.css
   브랜드 "낙서 노트": 종이 · 연필 · 코랄/파랑/형광펜. 로고는 개구체, 본문은 시스템 한글 글꼴.
   ===================================================================== */

:root {
  --bg: #fff8ec;
  --bg-2: #f3ecff;
  --card: #ffffff;
  --text: #2b2d42;
  --muted: #6c6f85;
  --line: #ece7f3;

  --primary: #ff6b4a;
  --primary-dark: #e5502f;
  --primary-deep: #c2412a;   /* 코랄 버튼의 아래 그림자(꾹 눌리는 도장 느낌) */
  --primary-soft: #ffe3db;
  --secondary: #3d7bf2;
  --secondary-dark: #2c64d6;
  --secondary-deep: #2352b3;
  --secondary-soft: #e3ecff;
  --accent: #ffd84d;
  --paper-line: #e8eefc;     /* 공책 줄 */
  --paper-margin: #ffc2b5;   /* 공책 여백 선 */
  --green: #2ec27e;
  --green-soft: #dff8ec;
  --amber: #f4a300;
  --amber-soft: #fff1d6;
  --red: #e5484d;
  --red-soft: #ffe1e2;
  --blue-soft: #e8f0ff;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(43, 45, 66, 0.10);
  --shadow-sm: 0 4px 14px rgba(43, 45, 66, 0.08);

  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Gaegu", var(--font);
  --mono: ui-monospace, "Cascadia Mono", Consolas, "D2Coding", "Nanum Gothic Coding", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  line-height: 1.45;
  word-break: keep-all;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 3px solid rgba(61, 123, 242, 0.45); outline-offset: 2px; border-radius: 6px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 999px;
  padding: 10px 18px; font-weight: 700; letter-spacing: -0.01em;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease, opacity .15s;
  white-space: nowrap;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.btn:disabled { opacity: .5; box-shadow: none; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 0 var(--primary-deep); }
.btn-primary:active:not(:disabled) { box-shadow: 0 2px 0 var(--primary-deep); }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-secondary { background: var(--secondary); color: #fff; box-shadow: 0 4px 0 var(--secondary-deep); }
.btn-secondary:active:not(:disabled) { box-shadow: 0 2px 0 var(--secondary-deep); }
.btn-secondary:hover:not(:disabled) { background: var(--secondary-dark); }
.btn-ghost { background: rgba(43, 45, 66, 0.06); color: var(--text); }
.btn-ghost:hover:not(:disabled) { background: rgba(43, 45, 66, 0.12); }
.btn-outline { background: #fff; color: var(--text); box-shadow: inset 0 0 0 2px var(--line); }
.btn-outline:hover:not(:disabled) { background: #faf8ff; box-shadow: inset 0 0 0 2px #dcd5ea; }
.link-btn {
  border: 0; background: none; padding: 4px 2px; border-radius: 6px;
  font-size: 13px; font-weight: 700; color: var(--secondary-dark); line-height: 1.3;
}
.link-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.link-muted { color: var(--muted); font-weight: 600; }
.link-danger:hover, .link-danger:focus-visible { color: var(--red); }
.btn-danger { background: var(--red); color: #fff; box-shadow: 0 4px 0 #a92e32; }
.btn-danger:hover:not(:disabled) { filter: brightness(.94); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn-icon { padding: 7px 10px; font-size: 16px; line-height: 1; }
.btn-lg { padding: 13px 22px; font-size: 16px; }
.btn-xl { padding: 16px 26px; font-size: 20px; }
.btn-block { width: 100%; }

/* ---------- Landing ---------- */
.landing {
  position: relative; min-height: 100vh; min-height: 100dvh;
  /* 공책: 가로줄 + 왼쪽 여백 선. 카드 안은 흰 종이 그대로(읽기 편하게) */
  background-image:
    linear-gradient(to right, transparent 56px, var(--paper-margin) 56px, var(--paper-margin) 58px, transparent 58px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--paper-line) 35px, var(--paper-line) 36px);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; place-items: center;
  padding: 32px 16px 0; overflow: hidden;
  overflow: clip; /* 스크롤 컨테이너가 아니게: 넘친 배경 blob 때문에 포커스/클릭으로 카드가 밀려 보이지 않도록 */
}
/* 개인정보 처리방침: 카드 밖, 페이지 맨 아래 가운데. 약하게(작게 · 흐리게 · 밑줄은 hover 때만) */
.landing-foot {
  position: relative; width: 100%; display: flex; justify-content: center;
  padding: 18px 0 max(14px, env(safe-area-inset-bottom));
}
.privacy-link {
  font-size: 12px; font-weight: 500; color: var(--muted); opacity: .8; text-decoration: none;
  padding: 4px 6px; border-radius: 6px;
}
.privacy-link:hover, .privacy-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; opacity: 1; }
/* 배경 낙서(공책 귀퉁이에 끄적인 사과 · 물결 · 별) */
.doodle {
  position: absolute; pointer-events: none; overflow: visible;
  animation: float 9s ease-in-out infinite alternate;
}
/* 카드(가운데 460px) 바깥 좌우에 흩어 놓는다. 큰 화면일수록 더 넓게 퍼진다 */
.doodle-apple  { width: 150px; height: 150px; top: 5%;  left:  max(16px, calc(50% - 440px)); }
.doodle-q      { width: 52px;  height: 78px;  top: 32%; left:  max(24px, calc(50% - 520px)); animation-delay: -2s; }
.doodle-cloud  { width: 130px; height: 74px;  top: 50%; left:  max(8px,  calc(50% - 720px)); animation-delay: -5s; }
.doodle-heart  { width: 64px;  height: 58px;  top: 62%; left:  max(30px, calc(50% - 380px)); animation-delay: -1s; }
.doodle-pencil { width: 130px; height: 54px;  bottom: 8%; left: max(16px, calc(50% - 560px)); animation-delay: -7s; }
.doodle-zig    { width: 120px; height: 34px;  top: 16%; left:  max(12px, calc(50% - 700px)); animation-delay: -4s; }
.doodle-star   { width: 60px;  height: 60px;  top: 12%; right: max(16px, calc(50% - 400px)); animation-delay: -6s; }
.doodle-sun    { width: 100px; height: 100px; top: 24%; right: max(20px, calc(50% - 640px)); animation-delay: -3s; }
.doodle-bolt   { width: 44px;  height: 66px;  top: 46%; right: max(40px, calc(50% - 360px)); animation-delay: -8s; }
.doodle-spiral { width: 76px;  height: 76px;  top: 56%; right: max(18px, calc(50% - 560px)); animation-delay: -1.5s; }
.doodle-smile  { width: 72px;  height: 72px;  bottom: 22%; right: max(24px, calc(50% - 760px)); animation-delay: -5.5s; }
.doodle-wave   { width: 180px; height: 45px;  bottom: 9%; right: max(12px, calc(50% - 440px)); animation-delay: -3s; }
@media (prefers-reduced-motion: reduce) { .doodle, .logo-squiggle { animation: none; } }
@keyframes float { from { transform: translateY(0) rotate(0); } to { transform: translateY(24px) rotate(12deg); } }

/* 흰 종이 한 장(연필 테두리). 줄무늬는 페이지 배경에만 */
.landing-card {
  position: relative; width: 100%; max-width: 460px; min-width: 0;
  background-color: var(--card); border-radius: 28px;
  box-shadow: 0 0 0 2px var(--text), 6px 8px 0 rgba(43, 45, 66, 0.08);
  padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 18px;
}
.logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center; font-weight: 700;
}
.logo-mark {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--font-display); font-weight: 700; font-size: 68px; line-height: 0.95; letter-spacing: -0.04em;
}
.logo-mark em { font-style: normal; color: var(--primary); }
.logo-squiggle { width: 0.62em; height: 0.62em; margin-left: 4px; animation: wiggle 2.4s ease-in-out infinite; transform-origin: 30% 70%; }
@keyframes wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.logo-sub { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.1; color: var(--secondary); word-spacing: -0.12em; }
/* 랜딩 버튼은 연필 선으로 */
.landing .btn-outline { box-shadow: inset 0 0 0 2px var(--text); }
.landing .btn-outline:hover:not(:disabled) { background: #fffdf8; box-shadow: inset 0 0 0 2px var(--text); }


.profile { display: flex; align-items: center; gap: 14px; }
.avatar-preview {
  flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%;
  background: var(--av, #bae1ff); display: grid; place-items: center; font-size: 36px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08), var(--shadow-sm);
  transition: background .2s;
}
.field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 700; color: var(--muted); }
input[type="text"], textarea, select {
  width: 100%; border: 2px solid var(--line); border-radius: 12px; background: #fbfaff;
  padding: 11px 13px; font-size: 15px; transition: border-color .15s, background .15s;
}
input[type="text"]:focus, textarea:focus, select:focus { border-color: var(--secondary); background: #fff; outline: none; }
textarea { resize: vertical; min-height: 64px; }

.picker { display: flex; flex-direction: column; gap: 8px; }
.picker-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.emoji-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.emoji-btn {
  border: 2px solid transparent; background: #f6f4fb; border-radius: 12px;
  font-size: 24px; line-height: 1; padding: 7px 0; transition: transform .1s, border-color .15s, background .15s;
}
.emoji-btn:hover { transform: translateY(-2px); background: #efeaff; }
.emoji-btn[aria-checked="true"] { border-color: var(--secondary); background: var(--secondary-soft); }
.color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.color-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--line); transition: transform .1s, box-shadow .15s;
}
.color-btn:hover { transform: scale(1.08); }
.color-btn[aria-checked="true"] { box-shadow: 0 0 0 3px var(--secondary); }

.divider {
  display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.join-row { display: flex; gap: 10px; min-width: 0; }
/* "+ 방 만들기": + 는 글자가 아닌 장식(텍스트는 "방 만들기" 그대로) */
.btn-plus::before { content: "+"; font-size: 1.25em; font-weight: 800; line-height: 1; margin-top: -0.08em; }
.join-row input {
  flex: 1; min-width: 0; text-transform: uppercase; font-family: var(--mono); font-size: 22px; letter-spacing: .35em;
  text-align: center; padding: 10px 0 10px .35em;
}

/* ---------- Room layout ---------- */
.room { min-height: 100vh; padding: 14px 16px 24px; max-width: 1440px; margin: 0 auto; }

.topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 10px 16px; margin-bottom: 14px; min-height: 72px;
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.topbar-center { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }

.room-code-chip {
  display: inline-flex; align-items: baseline; gap: 8px; background: var(--secondary-soft);
  border-radius: 999px; padding: 6px 14px;
}
.chip-label { font-size: 12px; font-weight: 700; color: var(--secondary-dark); }
.room-code-chip strong { font-family: var(--mono); font-size: 20px; letter-spacing: .18em; color: var(--secondary-dark); }

/* 방송 모드: 코드는 ••••, 누르면 4초 보임 */
.room-code-chip.hidden-code { cursor: pointer; }
.room-code-chip.hidden-code strong { letter-spacing: .1em; }
.room-code-chip.hidden-code:hover { background: var(--blue-soft); }
.round-indicator { font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.word-area { display: flex; align-items: center; gap: 10px; min-height: 34px; flex-wrap: wrap; justify-content: center; }
.word-hint { color: var(--muted); font-size: 15px; }
.mask { display: inline-flex; align-items: flex-end; gap: 5px; }
.mask-box {
  display: inline-grid; place-items: center; width: 24px; height: 30px;
  border-bottom: 3px solid var(--text); font-family: var(--mono); font-size: 20px; font-weight: 700;
  color: var(--primary-dark); border-radius: 3px 3px 0 0;
}
.mask-box.revealed { background: var(--primary-soft); }
.mask-wrap.solved .mask-box.revealed { background: #d6f5e3; color: #1e9a62; }
/* 카테고리 힌트: 마지막 초성 힌트와 함께 등장 */
.word-category { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--secondary-dark); background: var(--secondary-soft); padding: 2px 8px; border-radius: 999px; margin-left: 8px; white-space: nowrap; animation: cat-pop .35s ease-out; }
.word-category .cat-label { font-weight: 600; opacity: .7; }
.word-secret .word-category { margin-left: 10px; }
@keyframes cat-pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mask-gap { width: 14px; }
.mask-len { font-size: 13px; color: var(--muted); margin-left: 4px; }
.word-secret { display: inline-flex; align-items: baseline; gap: 8px; }
.word-secret .label { font-size: 12px; font-weight: 800; color: var(--muted); }
.word-secret .word { font-size: 24px; font-weight: 900; color: var(--primary-dark); letter-spacing: .02em; }
/* 방송 모드: 출제자 단어를 흐리게, 누르면 보기/가리기 */
.word-secret.peekable { cursor: pointer; border-radius: 10px; padding: 2px 8px; background: var(--primary-soft); }
.word-secret.peekable .word, .word-secret.peekable .word-category { filter: blur(7px); user-select: none; }
.word-secret.peekable.peek .word, .word-secret.peekable.peek .word-category { filter: none; }
.word-secret .peek-hint { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 4px; }
.word-options.blurred .word-option { filter: blur(6px); pointer-events: none; user-select: none; }
.choosing-stream { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.choosing-stream:empty { display: none; }
#btn-peek-options, #btn-choose-window { flex-direction: column; gap: 0; line-height: 1.2; }
#btn-peek-options small, #btn-choose-window small { font-weight: 600; opacity: .85; }
.btn-word-window { white-space: nowrap; }
.btn-screen { white-space: nowrap; }
.word-answer { font-size: 20px; font-weight: 900; color: var(--green); }

.timer {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums;
  background: #fff; border: 4px solid var(--accent); color: var(--text);
  transition: border-color .2s, color .2s, background .2s;
}
.timer.urgent { border-color: var(--red); color: #fff; background: var(--red); animation: pulse .9s ease-in-out infinite; }
.timer.idle { border-color: var(--line); color: var(--muted); }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.room-grid {
  display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; gap: 14px;
  grid-template-areas: "players center chat"; align-items: stretch;
}
.panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px; min-width: 0; }
.panel-title { font-size: 15px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: baseline; gap: 6px; }
.panel-sub { font-size: 12px; color: var(--muted); font-weight: 700; }

/* ---------- Players ---------- */
.players-panel { grid-area: players; align-self: start; }
.player-list { display: flex; flex-direction: column; gap: 8px; }
.player {
  display: grid; grid-template-columns: 22px 40px 1fr auto; align-items: center; gap: 8px;
  padding: 8px 8px 8px 6px; border-radius: 14px; background: #f8f6fc; position: relative;
  transition: background .2s, box-shadow .2s;
}
.player.guessed { background: var(--green-soft); box-shadow: inset 0 0 0 2px rgba(46, 194, 126, 0.35); }
.player.drawing { background: var(--amber-soft); }
.player.me { outline: 2px dashed rgba(61, 123, 242, 0.35); outline-offset: -2px; }
.rank { font-size: 12px; font-weight: 900; color: var(--muted); text-align: center; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
  background: var(--av, #bae1ff); position: relative; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.08);
}
.badge-drawer {
  position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; display: grid; place-items: center; font-size: 13px; box-shadow: var(--shadow-sm);
}
.badge-next {
  position: absolute; left: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--secondary); color: #fff; display: grid; place-items: center; font-size: 10px; box-shadow: var(--shadow-sm);
}
.next-tag { color: var(--secondary-dark); font-weight: 700; font-size: 11px; background: var(--secondary-soft, rgba(79, 140, 255, .12)); padding: 1px 6px; border-radius: 8px; }
.player.next { outline: 1.5px dashed var(--secondary); outline-offset: -1.5px; }
.player.offline { opacity: .6; }
.player.offline .avatar { filter: grayscale(1); }
.offline-tag { color: var(--muted); font-weight: 700; font-size: 11px; background: rgba(43, 45, 66, .08); padding: 1px 6px; border-radius: 8px; }

/* 반응(👍/👎) 팝업: 아바타 위로 떠오르며 1초 뒤 사라짐 */
.avatar { overflow: visible; }
.react-pop {
  position: absolute; bottom: 60%; left: 30px; font-size: 20px; line-height: 1; pointer-events: none;
  transform: translate(-50%, 0) rotate(var(--rot, 0deg)); animation: react-float 1s ease-out forwards; z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}
@keyframes react-float {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.6) rotate(var(--rot, 0deg)); }
  20% { opacity: 1; transform: translate(-50%, -6px) scale(1.15) rotate(var(--rot, 0deg)); }
  100% { opacity: 0; transform: translate(-50%, -34px) scale(1) rotate(var(--rot, 0deg)); }
}
.pinfo { min-width: 0; display: flex; flex-direction: column; }
.pname { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pname .me-tag { color: var(--secondary-dark); font-weight: 700; font-size: 12px; }
.pscore { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.player.guessed .pscore { color: #1e9a62; font-weight: 700; }
.kick {
  width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; color: var(--muted);
  font-size: 13px; line-height: 1; opacity: 0; transition: opacity .15s, background .15s;
}
.player:hover .kick, .kick:focus-visible { opacity: 1; }
.kick:hover { background: var(--red-soft); color: var(--red); }

/* ---------- Center ---------- */
.center-panel { grid-area: center; display: flex; flex-direction: column; gap: 12px; }
.canvas-wrap {
  position: relative; width: 100%; max-width: 800px; aspect-ratio: 4 / 3; margin: 0 auto;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--line);
}
#canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: default; }
#canvas.can-draw { cursor: crosshair; }

.draw-status {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  text-align: center; font-size: 14px; color: var(--muted); font-weight: 700;
  padding: 6px 8px; background: #f8f6fc; border-radius: 12px; min-height: 40px;
}
.react-bar { display: inline-flex; gap: 6px; }
.react-btn {
  border: 2px solid transparent; background: #fff; border-radius: 999px; width: 34px; height: 30px;
  font-size: 16px; line-height: 1; box-shadow: var(--shadow-sm); transition: transform .08s, border-color .15s;
}
.react-btn:hover { transform: translateY(-1px); border-color: var(--secondary); }
.react-btn:active { transform: scale(.9); }

.drawer-chat { display: none; }

/* toolbar */
.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  padding: 10px 12px; background: #f8f6fc; border-radius: 14px; max-width: 800px; margin: 0 auto; width: 100%;
  transition: opacity .2s, filter .2s;
}
.toolbar[aria-disabled="true"] { opacity: .45; filter: grayscale(.7); pointer-events: none; }
.tool-group { display: flex; gap: 6px; }
.tool {
  width: 40px; height: 40px; border-radius: 12px; border: 2px solid transparent; background: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: transform .1s, border-color .15s, background .15s;
}
.tool svg { width: 22px; height: 22px; fill: var(--text); }
.tool:hover { transform: translateY(-2px); }
.tool.active { border-color: var(--secondary); background: var(--secondary-soft); }
.tool.active svg { fill: var(--secondary-dark); }
.tool-danger:hover { background: var(--red-soft); }
.tool-danger:hover svg { fill: var(--red); }

.current-color {
  width: 40px; height: 40px; border-radius: 12px; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line), var(--shadow-sm);
  background: #000;
}
.palette { display: grid; grid-template-columns: repeat(10, 22px); gap: 4px; }
.swatch { width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); transition: transform .1s; }
.swatch:hover { transform: scale(1.15); }
.swatch.active { box-shadow: 0 0 0 2px var(--secondary); }
.swatch-custom {
  position: relative; display: inline-flex; overflow: hidden; cursor: pointer;
  background: conic-gradient(red, orange, yellow, limegreen, cyan, blue, magenta, red);
}
.swatch-custom input[type="color"] {
  position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
  opacity: 0; cursor: pointer; border: 0; padding: 0; appearance: none;
}
.swatch-custom.chosen { background: var(--custom-color, #ff3d81); }
.swatch-custom.active { box-shadow: 0 0 0 2px var(--secondary); }
.sizes { display: flex; gap: 6px; align-items: center; }
.size-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.size-btn i { display: block; border-radius: 50%; background: var(--text); }
.size-btn.active { border-color: var(--secondary); background: var(--secondary-soft); }

/* settings */
.settings-panel { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; width: 100%; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.setting { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.setting small { font-weight: 500; }
.setting select, .setting textarea { font-weight: 600; color: var(--text); }
select:disabled, textarea:disabled, input:disabled { background: #f2f0f6; color: var(--muted); cursor: not-allowed; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }
/* 게임 시작 + 안내: 설정 패널 안에서 화면 아래에 고정(sticky). 위로 옅은 그림자로 설정과 나눈다 */
.start-row {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: 6px; align-items: center;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--card); box-shadow: 0 -10px 14px -12px rgba(43, 45, 66, 0.35);
}
.start-row .start-hint:empty { display: none; }
/* 게임 설정(방장): ① 게임 길이 · ② 단어 · ③ 난이도 */
.settings-host { display: flex; flex-direction: column; gap: 14px; }
.setting-block { display: flex; flex-direction: column; gap: 10px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.block-title { font-size: 14px; font-weight: 800; color: var(--text); }
.settings-estimate { font-size: 12px; font-weight: 700; color: var(--muted); }
.set-group { border-radius: 16px; box-shadow: inset 0 0 0 2px var(--line); padding: 12px 14px; gap: 8px; }
.set-group .block-title { margin: 0; }
/* 한 줄 설정: 왼쪽 이름(+도움말 · 요약), 오른쪽 조작(− 값 + · 선택 상자 · 고르기/바꾸기) */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.set-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.set-label .setting-help { font-weight: 500; }
.set-title { font-size: 14px; font-weight: 800; color: var(--text); }
.set-sum { font-size: 13px; font-weight: 700; color: var(--secondary-dark); overflow-wrap: anywhere; }
.set-row select { flex: 0 1 200px; min-width: 0; font-weight: 600; color: var(--text); }
.set-open { flex: 0 0 auto; }
#btn-diff-toggle::after { content: " ▾"; }
#btn-diff-toggle[aria-expanded="true"]::after { content: " ▴"; }
.set-note { font-size: 13px; font-weight: 600; color: var(--muted); }
.diff-body { display: flex; flex-direction: column; gap: 6px; border-top: 2px dashed var(--line); padding-top: 8px; }
/* − / + 버튼: 끝값에서는 그쪽 버튼이 꺼진다 */
.stepper { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.step-btn {
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f3effb; color: var(--text);
  font: inherit; font-size: 22px; font-weight: 800; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background .15s;
}
.step-btn:hover:not(:disabled) { background: var(--secondary-soft); }
.step-btn:disabled { opacity: .35; cursor: default; }
.step-val { min-width: 64px; text-align: center; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.custom-block { background: #f8f6fc; border-radius: 14px; padding: 10px 12px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.switch-text small { font-size: 12px; color: var(--muted); font-weight: 500; }
.switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switch { position: relative; flex: 0 0 auto; width: 46px; height: 28px; border-radius: 999px; background: #d9d4e4; border: 0; padding: 0; cursor: pointer; transition: background .15s; }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; }
.switch-input:checked + .switch, .switch[aria-checked="true"] { background: var(--primary); }
.switch-input:checked + .switch .switch-knob, .switch[aria-checked="true"] .switch-knob { transform: translateX(18px); }
.switch-input:focus-visible + .switch, .switch:focus-visible { outline: 3px solid var(--secondary-soft); outline-offset: 2px; }
.switch-input:disabled + .switch { opacity: .5; cursor: default; }
.custom-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
/* 카테고리 고르기 창: 칩 13개(기본은 전부 켜짐, 파랑). 끄면 흐린 회색 테두리. "모두 선택 · 모두 해제"는 칩과 구분되는 글자 버튼 */
.modal-cats { z-index: 70; }
.modal-card.card-cats { width: min(520px, 100%); gap: 12px; max-height: min(86vh, 560px); }
.card-cats .cat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-cats .cat-row { overflow-y: auto; min-height: 0; padding: 2px; }
.cat-tools { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.cat-tool { border: 0; background: none; padding: 4px 4px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--secondary-dark); line-height: 1.3; }
.cat-tool:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 2px; }
.cat-tool:disabled { color: var(--muted); opacity: .55; cursor: default; }
.cat-tool-sep { font-size: 12px; color: var(--muted); }
.cat-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip { border: 0; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 700; background: #fff; box-shadow: inset 0 0 0 2px var(--line); color: var(--muted); transition: box-shadow .15s, background .15s, color .15s; }
.cat-chip:hover:not(:disabled) { background: #f3effb; }
.cat-chip[aria-pressed="true"] { background: var(--secondary-soft); box-shadow: inset 0 0 0 2px var(--secondary); color: var(--secondary-dark); }
.cat-chip[aria-pressed="true"]::before { content: "✓ "; font-weight: 800; }
.cat-chip:disabled { opacity: .6; cursor: default; }
@media (max-width: 640px) { .cat-tool { min-height: 36px; padding: 6px 6px; } }
@keyframes cats-up { from { transform: translateY(100%); } to { transform: none; } }
.check small { font-weight: 500; color: var(--muted); font-size: 12px; margin-left: 4px; }
.setting-help { font-size: 11px; font-weight: 500; color: var(--muted); line-height: 1.35; }
.settings-summary { display: flex; flex-direction: column; gap: 10px; }
.sum-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sum-words { background: #f8f6fc; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.sum-words-title { font-size: 13px; font-weight: 800; }
.sum-words-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow-y: auto; }
.sum-word { font-size: 13px; font-weight: 600; background: #fff; border-radius: 999px; padding: 3px 10px; box-shadow: inset 0 0 0 1px var(--line); }
.settings-summary .sum-chip { font-size: 13px; font-weight: 700; background: #f8f6fc; border-radius: 999px; padding: 6px 12px; color: var(--text); }
.settings-summary .sum-chip.sum-main { background: var(--secondary-soft); color: var(--secondary-dark); }
/* 방 설정 창(효과음 · 프로필) */
.room-settings-top { display: flex; flex-direction: column; gap: 10px; }
.rs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f8f6fc; border-radius: 14px; padding: 10px 14px; }
.rs-label { display: flex; flex-direction: column; font-size: 15px; font-weight: 800; }
.rs-label small { font-size: 12px; font-weight: 600; color: var(--muted); }
.rs-section-title { font-size: 13px; font-weight: 800; color: var(--muted); margin-top: 4px; }
.rs-note { font-size: 13px; color: var(--muted); background: #f8f6fc; border-radius: 12px; padding: 12px 14px; text-align: center; }
.room-settings-slot:empty { display: none; }
/* 모드 선택 */
.settings-head { display: flex; align-items: center; gap: 12px; }
.settings-head .panel-title { margin: 0; }
.mode-badge { font-size: 12px; font-weight: 700; color: var(--secondary-dark); background: var(--secondary-soft); padding: 2px 10px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.mode-card {
  display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 18px 18px 16px;
  border: 2px solid var(--line); border-radius: 18px; background: #fbfaff; transition: transform .1s, border-color .15s, box-shadow .15s;
}
.mode-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--secondary); box-shadow: var(--shadow-sm); }
.mode-card.selected { border-color: var(--primary); background: var(--primary-soft); }
.mode-card:disabled { cursor: default; opacity: .8; }
.mode-icon { font-size: 30px; line-height: 1; }
.mode-name { font-weight: 900; font-size: 17px; color: var(--text); }
.mode-desc { font-size: 13px; color: var(--muted); line-height: 1.45; }
.mode-meta { font-size: 11px; font-weight: 700; color: var(--secondary-dark); }
.fixed-tag { color: #b3261e; font-weight: 700; font-size: 11px; background: var(--primary-soft); padding: 1px 6px; border-radius: 8px; }
.start-hint { font-size: 13px; color: var(--muted); min-height: 1.4em; text-align: center; }

/* ---------- Overlays ---------- */
.overlay {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 16px;
  background: rgba(43, 45, 66, 0.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: fade .2s ease-out;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.card {
  background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 22px 24px;
  width: min(92%, 420px); max-height: 100%; overflow: auto; text-align: center;
  display: flex; flex-direction: column; gap: 14px; align-items: center; animation: pop .25s cubic-bezier(.2, .9, .3, 1.3);
}
.card-wide { width: min(96%, 560px); }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.card-eyebrow { font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .04em; }
.card-title { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.answer-word { color: var(--primary-dark); }
.card-note { font-size: 13px; color: var(--muted); }
.card-wait { color: var(--muted); }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); animation: bounce 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-7px); opacity: 1; } }
.overlay-timer {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 4px solid var(--accent); font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums;
}
.overlay-timer.small { width: 36px; height: 36px; font-size: 15px; border-width: 3px; }
.overlay-timer.urgent { border-color: var(--red); color: var(--red); }

.word-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.word-option {
  border: 2px solid var(--line); background: #fbfaff; border-radius: 14px; padding: 12px 18px;
  font-size: 18px; font-weight: 800; transition: transform .1s, border-color .15s, background .15s;
}
.word-option:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--primary); background: var(--primary-soft); }
.word-option.chosen { border-color: var(--green); background: var(--green-soft); }
/* 이어 그리기: 단어 후보 중 2개 고르기. 칸 폭에 맞춰 3열(PC)·2열(폰 360px), 고른 칩은 순서 번호 */
.word-options.relay-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; width: 100%; }
.pick-option { position: relative; font-size: 16px; padding: 10px 10px; min-height: 44px; overflow-wrap: anywhere; line-height: 1.25; }
.pick-option.picked { border-color: var(--primary); background: var(--primary-soft); }
.pick-option.dim { opacity: .55; }
.pick-option .pick-num:empty { display: none; }
.pick-option .pick-num {
  position: absolute; top: -7px; left: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.relay-pick-bar { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.relay-pick-preview { font-size: 18px; font-weight: 900; min-height: 1.4em; color: var(--primary-dark); overflow-wrap: anywhere; }
.relay-pick-preview .pick-sep { color: var(--muted); }
.relay-pick-preview .pick-empty { font-size: 14px; font-weight: 700; color: var(--muted); }
.relay-pick-bar .btn { min-width: 180px; }
.relay-pick-bar.blurred .relay-pick-preview { filter: blur(6px); user-select: none; }
.relay-pick-bar.blurred .btn { pointer-events: none; }

.delta-list { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.delta-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: #f8f6fc; }
.delta-row .avatar { width: 30px; height: 30px; font-size: 17px; }
.delta-row .dname { flex: 1; text-align: left; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.delta-row .delta { font-weight: 900; font-variant-numeric: tabular-nums; color: var(--muted); }
.delta-row .delta.pos { color: #1e9a62; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; align-items: end; margin-top: 4px; }
.podium-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.podium-slot .avatar { width: 46px; height: 46px; font-size: 26px; }
.podium-slot .medal { font-size: 26px; line-height: 1; }
.podium-slot .pname { font-size: 14px; max-width: 100%; }
.podium-slot .pscore { font-size: 13px; font-weight: 800; color: var(--text); }
.podium-bar { width: 100%; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, var(--accent), #ffbe3d); }
.podium-slot.p1 .podium-bar { height: 64px; }
.podium-slot.p2 .podium-bar { height: 44px; background: linear-gradient(180deg, #dfe3ea, #c3c9d4); }
.podium-slot.p3 .podium-bar { height: 30px; background: linear-gradient(180deg, #f0c5a3, #d9a07a); }
.ranking-list { width: 100%; display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; }
.ranking-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 10px; background: #f8f6fc; font-size: 14px; }
.ranking-row .rank { width: 26px; }
.ranking-row .avatar { width: 26px; height: 26px; font-size: 15px; }
.ranking-row .rname { flex: 1; text-align: left; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking-row .rscore { font-weight: 900; font-variant-numeric: tabular-nums; }

/* ---------- Chat ---------- */
.chat-panel {
  grid-area: chat; display: flex; flex-direction: column; min-height: 0;
  max-height: calc(100vh - 128px);
}
.chat-list {
  flex: 1 1 0; min-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  padding: 4px 2px; scroll-behavior: smooth;
}
.msg { font-size: 14px; padding: 6px 10px; border-radius: 12px; background: #f8f6fc; display: flex; align-items: flex-start; gap: 8px; overflow-wrap: anywhere; }
.msg .avatar { width: 24px; height: 24px; font-size: 14px; flex: 0 0 auto; margin-top: 1px; }
.msg-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.msg-name { font-weight: 800; font-size: 12px; line-height: 1.3; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-text { line-height: 1.4; }
.msg-mine { background: var(--blue-soft); }
.msg-system { background: transparent; color: var(--muted); font-style: italic; font-size: 13px; justify-content: center; text-align: center; padding: 2px 6px; }
.msg-correct { background: var(--green-soft); color: #167a4c; font-weight: 800; }
.msg-close { background: var(--amber-soft); color: #9a6200; font-weight: 700; }
.msg-guessed { background: var(--blue-soft); color: #3d5d9c; }
.msg-guessed .msg-icon { flex: 0 0 auto; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input { flex: 1; min-width: 0; padding: 10px 12px; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; pointer-events: none; }
.toast {
  background: var(--text); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
  box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-ok { background: var(--green); }
.toast-error { background: var(--red); }

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  .room { padding: 10px 10px 20px; }
  .topbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 10px; min-height: 60px; padding: 8px 12px; }
  .topbar-center { order: 3; flex: 1 0 100%; }
  .room-code-chip { padding: 5px 10px; }
  .room-code-chip strong { font-size: 16px; }
  .timer { width: 46px; height: 46px; font-size: 18px; }
  .room-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "players" "center" "chat";
  }
  .players-panel { padding: 10px; }
  .players-panel .panel-title { display: none; }
  .player-list { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 2px; }
  .player { flex: 0 0 auto; grid-template-columns: 34px 1fr auto; padding: 6px 10px 6px 6px; border-radius: 999px; }
  .player .rank { display: none; }
  .player .avatar { width: 34px; height: 34px; font-size: 19px; }
  .player .pinfo { flex-direction: row; align-items: baseline; gap: 6px; white-space: nowrap; }
  .player .pname { max-width: 120px; }
  .player .kick { opacity: 1; }
  .chat-panel { max-height: none; height: 380px; }
  .chat-list { min-height: 0; }
}
@media (max-width: 560px) {
  .landing-card { padding: 26px 18px 20px; border-radius: 22px; }
  .logo-mark { font-size: 58px; }
  .logo-sub { font-size: 21px; }
  /* 좁은 화면: 카드가 거의 다 차지하므로 위·아래 가장자리에 몇 개만 */
  .landing { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--paper-line) 35px, var(--paper-line) 36px); }
  .doodle { display: none; }
  .doodle-apple { display: block; width: 100px; height: 100px; top: 1%; left: 6px; }
  .doodle-star { display: block; width: 44px; height: 44px; top: 4%; right: 14px; }
  .doodle-q { display: block; width: 34px; height: 52px; top: 12%; left: auto; right: 70px; }
  .doodle-wave { display: block; width: 120px; height: 30px; bottom: 5%; right: 8px; }
  .doodle-heart { display: block; width: 44px; height: 40px; top: auto; bottom: 8%; left: 14px; }
  .emoji-strip { grid-template-columns: repeat(8, 1fr); gap: 4px; }
  .emoji-btn { font-size: 20px; }
  .color-row { gap: 6px; }
  .color-btn { width: 30px; height: 30px; }
  .palette { grid-template-columns: repeat(10, 20px); }
  .swatch { width: 20px; height: 20px; }
  .btn-copy-text { display: none; }
  .topbar .btn-sm { padding: 7px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 근접 정답 안내 라벨 */
.msg-close .msg-note { margin-left: 6px; font-size: 12px; font-weight: 700; opacity: .85; white-space: nowrap; }

/* ---------- 게임 종료 결과 모달 ---------- */
.modal-results { z-index: 45; }
/* 나갈까요? 확인 — 시트·결과·내 정보 위 */
/* .modal(z 50)이 뒤에 오므로 .modal.modal-confirm 으로 명시도를 높여 확인 창이 항상 열린 모달들 위에 오게 한다 */
.modal.modal-confirm { z-index: 80; }
.modal.modal-confirm { align-items: center; } /* 모바일에서도 가운데(다른 모달은 위쪽 정렬) */
.modal-card.card-confirm { width: min(380px, 100%); gap: 8px; text-align: center; padding: 22px 20px 18px; }
.confirm-desc { font-size: 14px; color: var(--muted); line-height: 1.5; margin-bottom: 8px; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card-results { width: min(96%, 560px); align-items: center; text-align: center; gap: 10px; }
.card-results .ranking-list { max-height: 30vh; }
.results-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
#results-waiting:empty { display: none; }

/* ---------- 그림 갤러리 모달 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px;
  background: rgba(43, 45, 66, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .2s ease-out;
}
.modal-card {
  width: min(1100px, 100%); max-height: 92vh; display: flex; flex-direction: column; gap: 14px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px 20px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.modal-actions { display: flex; gap: 8px; }
/* 행이 모달 높이에 맞춰 찌부러지지 않게(max-content) — 넘치면 격자만 스크롤. 전에는 행이 줄어 저장 버튼이 잘렸다 */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 14px; overflow: auto; padding: 2px; flex: 1 1 auto; min-height: 0; }
.gallery-foot { display: flex; justify-content: center; flex: 0 0 auto; }
.gallery-foot .link-btn { font-size: 13px; padding: 4px 8px; }
.gallery-item { background: #f8f6fc; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3; background: #fff; object-fit: contain; border-bottom: 1px solid var(--line); }
.gallery-item .gallery-empty { display: grid; place-items: center; aspect-ratio: 4 / 3; color: var(--muted); font-size: 13px; background: #fff; }
.gallery-meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.gallery-word { font-weight: 900; font-size: 18px; letter-spacing: -0.01em; }
.gallery-word .gallery-cat { font-weight: 700; font-size: 11px; color: var(--secondary-dark); background: var(--secondary-soft); padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.gallery-sub { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.gallery-sub .btn { padding: 5px 10px; font-size: 12px; }
.gallery-by { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.gallery-by .gallery-av { width: 20px; height: 20px; font-size: 12px; flex: 0 0 auto; box-shadow: none; }
.gallery-drawer { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 이어 그리기 갤러리: "1번 · 🖍 A·B·C  🎯 D 맞힘" 한 줄, 좁으면 공동 작가부터 말줄임(전체는 카드 title) */
.gallery-by.relay { overflow: hidden; white-space: nowrap; gap: 5px; }
.gallery-by.relay .gallery-no { flex: 0 0 auto; }
.gallery-by.relay .gallery-drawer { flex: 0 1 auto; min-width: 0; }
.gallery-guesser { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.gallery-guesser.got { color: #1e9a62; }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } .modal { padding: 10px; } .modal-card { padding: 14px; } }

/* =====================================================================
   가로 게임 셸(아이패드 가로 · 폰 가로, 터치 · 폭 ≥ 640px) — 게임 중에만 body.tablet-shell (client.js).
   방을 화면(visualViewport) 높이에 고정해 키보드가 올라와도 입력칸이 화면 안에 있고,
   캔버스는 JS(fitTabletCanvas)가 준 --tw 너비(4:3)로 가운데 패널의 남는 높이에 맞춰 줄어든다.
   ===================================================================== */
@media (min-width: 640px) and (orientation: landscape) and (pointer: coarse) {
  body.tablet-shell { overflow: hidden; height: 100vh; height: var(--vvh, 100dvh); }
  body.tablet-shell .room {
    position: fixed; left: 0; right: 0; top: 0; max-width: none; margin: 0; min-height: 0;
    height: 100vh; height: var(--vvh, 100dvh); transform: translateY(var(--vvt, 0px));
    display: flex; flex-direction: column; padding: 8px 10px; overflow: hidden;
  }
  body.tablet-shell .topbar { flex: 0 0 auto; margin-bottom: 8px; min-height: 0; padding: 6px 12px; }
  body.tablet-shell .room-grid { flex: 1 1 auto; min-height: 0; gap: 10px; grid-template-rows: minmax(0, 1fr); grid-template-columns: 210px minmax(0, 1fr) 300px; }
  body.tablet-shell .players-panel { align-self: stretch; min-height: 0; overflow-y: auto; }
  body.tablet-shell .center-panel { min-height: 0; overflow: hidden; gap: 8px; justify-content: center; }
  body.tablet-shell .canvas-wrap { flex: 0 0 auto; max-width: none; width: var(--tw, 100%); }
  body.tablet-shell .toolbar, body.tablet-shell .draw-status { flex: 0 0 auto; max-width: none; }
  body.tablet-shell .chat-panel { max-height: none; min-height: 0; }
  body.tablet-shell .chat-list { min-height: 0; }
  body.tablet-shell .chat-form input, body.tablet-shell .chat-form .btn { font-size: 16px; } /* iOS 확대 방지 */
}
/* 폰 가로(폭 < 1100): 참가자 열을 좁히고, ≤1099px 의 "세로로 쌓는" 규칙(헤더 2줄 · 가로 참가자 띠 · 채팅 380px)을 되돌린다 */
@media (min-width: 640px) and (max-width: 1099px) and (orientation: landscape) and (pointer: coarse) {
  body.tablet-shell .room { padding: 6px 8px; }
  body.tablet-shell .topbar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 4px 10px; margin-bottom: 6px; }
  body.tablet-shell .topbar-center { order: 0; flex: none; }
  body.tablet-shell .timer { width: 40px; height: 40px; font-size: 16px; }
  body.tablet-shell .topbar .btn-ico { width: 34px; height: 34px; }
  body.tablet-shell .room-grid { grid-template-columns: 150px minmax(0, 1fr) 230px; grid-template-areas: "players center chat"; gap: 8px; }
  body.tablet-shell .players-panel { padding: 6px; }
  body.tablet-shell .player-list { flex-direction: column; overflow-x: visible; gap: 4px; }
  body.tablet-shell .player { grid-template-columns: 26px minmax(0, 1fr); padding: 4px 6px; border-radius: 10px; }
  body.tablet-shell .player .avatar { width: 26px; height: 26px; font-size: 15px; }
  body.tablet-shell .player .pinfo { flex-direction: column; align-items: flex-start; gap: 0; }
  body.tablet-shell .player .pname { max-width: 100%; font-size: 12px; }
  body.tablet-shell .player .kick { display: none; }
  body.tablet-shell .center-panel { padding: 8px; }
  body.tablet-shell .draw-status { min-height: 32px; padding: 3px 8px; font-size: 13px; }
  body.tablet-shell .chat-panel { height: auto; padding: 8px; }
  body.tablet-shell .chat-panel .panel-title { display: none; }
  body.tablet-shell .room-code-chip .chip-label { display: none; }
  /* 출제자 도구 모음: 폰 세로처럼 2줄(도구 · 현재 색 · 굵기 · 편집 / 팔레트 가로 스크롤) — 캔버스 높이를 지킨다 */
  body.tablet-shell .toolbar {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-rows: auto auto;
    grid-template-areas: "tools color . sizes edit" "palette palette palette palette palette";
    gap: 4px 6px; padding: 5px 6px; align-items: center; border-radius: 12px;
  }
  body.tablet-shell .toolbar .tool-group:first-of-type { grid-area: tools; }
  body.tablet-shell .toolbar .tool-group:last-of-type { grid-area: edit; justify-self: end; }
  body.tablet-shell .toolbar .tool-group { gap: 3px; }
  body.tablet-shell .toolbar .tool { width: 32px; height: 32px; border-radius: 9px; }
  body.tablet-shell .toolbar .tool svg { width: 18px; height: 18px; }
  body.tablet-shell .current-color { grid-area: color; width: 32px; height: 32px; border-radius: 9px; }
  body.tablet-shell .palette { grid-area: palette; display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; overflow-x: auto; padding: 2px; scrollbar-width: none; }
  body.tablet-shell .palette::-webkit-scrollbar { display: none; }
  body.tablet-shell .swatch { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; }
  body.tablet-shell .sizes { grid-area: sizes; gap: 3px; justify-self: end; }
  body.tablet-shell .size-btn { width: 28px; height: 28px; }
}

/* ---------- 이어 그리기(relay) ---------- */
/* 상단 띠(데스크톱): "🖍 민수님 (1/2) · 다음 지은님 · 12초" */
.relay-band { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 13px; font-weight: 700; color: var(--text); background: #f8f6fc; border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.relay-band[hidden] { display: none; }
.relay-band b { font-weight: 900; }
.relay-band .rb-sep { color: var(--muted); font-weight: 500; }
.relay-band .rb-next { color: var(--muted); }
.relay-band .rb-leg, .ts-leg { font-family: var(--mono); font-weight: 800; color: var(--secondary-dark); }
.relay-band .rb-leg.urgent, .ts-leg.urgent { color: var(--red); }
/* 마스크 아래 줄: 상단 띠 + 맞히는 사람의 초성 힌트 버튼(같은 줄이라 주자↔맞히는 사람이 바뀌어도 헤더 높이가 같다) */
.relay-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: 100%; }
.relay-hint {
  padding: 3px 12px; gap: 4px; font-size: 13px; font-weight: 800; color: #7a4a00;
  background: var(--amber-soft); box-shadow: inset 0 0 0 1.5px rgba(244, 163, 0, .55);
}
.relay-hint:hover:not(:disabled) { background: #ffe6b3; }
.relay-hint:disabled { opacity: .45; }
.relay-hint .rh-short { display: none; }
/* 힌트 버튼 안내 말풍선(처음 한 번): body 바로 아래 fixed. left/top·꼬리 위치(--arrow-x)는 client.js 가 버튼 기준으로, 화면 밖으로 안 나가게 */
.relay-hint-tip {
  position: fixed; z-index: 90; left: 0; top: 0; max-width: calc(100vw - 16px); padding: 8px 12px; border-radius: 12px;
  background: var(--text); color: #fff; font-size: 13px; font-weight: 800; line-height: 1.35; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22); cursor: pointer; animation: tip-pop .25s ease-out;
}
.relay-hint-tip[hidden] { display: none; }
.relay-hint-tip::before {
  content: ''; position: absolute; top: -6px; left: var(--arrow-x, 50%); width: 12px; height: 12px; margin-left: -6px;
  background: inherit; transform: rotate(45deg); border-radius: 2px;
}
@keyframes tip-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .relay-hint-tip { animation: none; } }
/* 조합 마스크: 요소 묶음 사이에 가운뎃점. 맞힌 요소(본인 화면)는 초록, 방금 맞혔으면 한 번 튀어 오른다 */
.mask-part { display: inline-flex; align-items: flex-end; gap: 5px; }
.mask-part.solved .mask-box { background: #d6f5e3; color: #1e9a62; border-bottom-color: #1e9a62; }
.mask-part.just-solved { animation: cat-pop .45s ease-out; }
/* 부분 정답 안내(보낸 사람만): "3개 중 1개 맞았어요!" */
.msg-close.msg-partial { background: #e6f7ee; color: #17784c; }
.mask-sep { align-self: center; font-weight: 900; font-size: 18px; color: var(--muted); padding: 0 3px; }
.word-secret.relay-word .word { font-size: 21px; }
/* 차례가 아닌 주자: 툴바는 흐리게 잠그고 안내만 또렷하게 */
.toolbar { position: relative; }
.toolbar.relay-locked[aria-disabled="true"] { opacity: 1; filter: none; }
.toolbar.relay-locked > :not(.toolbar-lock) { opacity: .28; filter: grayscale(.8); }
.toolbar-lock {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0 12px;
  text-align: center; font-size: 14px; font-weight: 900; color: var(--text); pointer-events: none; border-radius: inherit;
  background: rgba(248, 246, 252, .55); /* 흐린 도구 위에서도 안내 글자가 또렷하게 */
}
.toolbar-lock[hidden] { display: none; }
/* 플레이어 목록: 맞히는 사람 🎯, 이번 문제 주자 🖍 */
.player.relay-guesser { outline: 1.5px dashed var(--amber); outline-offset: -1.5px; }
.runner-tag { font-size: 11px; }
/* 주자끼리 채팅(맞히는 사람은 못 본다) */
.msg-runner { background: var(--amber-soft); color: #7a4a00; }
.msg-tag { margin-left: 6px; font-size: 10px; font-weight: 800; padding: 0 6px; border-radius: 8px; background: rgba(122, 74, 0, .1); vertical-align: 1px; }
/* 내 차례 배너: 1.5초. 입력은 막지 않는다(pointer-events: none) */
.relay-banner { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(43, 45, 66, .32); pointer-events: none; }
.relay-banner[hidden] { display: none; }
.relay-banner.show { animation: relay-fade 1.5s ease-out forwards; }
.relay-banner.show .relay-banner-card { animation: relay-pop .35s ease-out; }
.relay-banner-card { background: var(--card); border-radius: 24px; padding: 20px 30px; text-align: center; box-shadow: var(--shadow); max-width: min(92vw, 520px); }
.relay-banner-title { font-family: var(--font-display); font-size: 44px; font-weight: 900; line-height: 1.1; color: var(--primary-dark); }
.relay-banner-time { margin-top: 2px; font-size: 20px; font-weight: 800; font-family: var(--mono); color: var(--secondary-dark); }
.relay-banner-word { margin-top: 10px; font-size: 28px; font-weight: 900; line-height: 1.25; color: var(--text); overflow-wrap: anywhere; }
@keyframes relay-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes relay-pop { from { transform: scale(.75); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .relay-banner.show, .relay-banner.show .relay-banner-card { animation: none; } }

/* =====================================================================
   모바일 전용 컴포넌트 — 데스크톱/태블릿에서는 존재하지만 렌더링되지 않는다(display:none).
   모바일 미디어 블록(≤767px 또는 세로 터치 태블릿)에서만 켜진다. #react-bar 가 비어 있으면 gap 만 차지하지 않도록 숨긴다.
   ===================================================================== */
.btn-menu, .turn-strip, .chat-bar, .chat-ticker, .chat-bubbles { display: none; }
#react-bar:empty { display: none; }

/* ---------- 바텀 시트(메뉴 / 플레이어 / 채팅). 높이는 JS 가 유지하는 --vvh(visualViewport) 를 따른다 ---------- */
.sheet {
  position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: var(--vvh, 100dvh);
  transform: translateY(var(--vvt, 0px));
  z-index: 60; display: flex; flex-direction: column; justify-content: flex-end;
}
.sheet-backdrop { position: absolute; inset: 0; background: rgba(43, 45, 66, 0.45); opacity: 0; transition: opacity .2s; }
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet-panel {
  position: relative; max-height: 85%; display: flex; flex-direction: column; min-height: 0;
  background: var(--card); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(43, 45, 66, 0.18);
  padding: 6px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform .22s cubic-bezier(.2, .9, .3, 1);
}
.sheet.open .sheet-panel { transform: none; }
.sheet-panel.dragging { transition: none; }
/* 드래그로 닫기: 손잡이·머리 영역은 브라우저 스크롤 제스처를 막고 우리가 처리 */
.sheet-handle, .sheet-head { touch-action: none; cursor: grab; }
.sheet-handle { position: relative; }
.sheet-handle::before { content: ""; position: absolute; left: -60px; right: -60px; top: -10px; bottom: -10px; } /* 손잡이 터치 영역 확대 */
.sheet-panel-chat { height: 85%; }
.sheet-handle { flex: 0 0 auto; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 8px; }
.sheet-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; }
.sheet-title { font-size: 16px; font-weight: 800; display: flex; align-items: baseline; gap: 6px; }
.sheet-close { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(43, 45, 66, 0.06); color: var(--text); font-size: 14px; line-height: 1; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.sheet-open { overflow: hidden; }
/* 메뉴 시트: 방 코드 크게 · 초대 링크 · 효과음 · 나가기(빨간색). 노드는 JS 가 헤더에서 옮겨 넣는다 */
.sheet-menu-body { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 4px; }
.menu-row { display: flex; align-items: center; }
.menu-row:empty { display: none; }
.menu-row .room-code-chip { width: 100%; justify-content: center; padding: 12px 16px; gap: 10px; }
.menu-row .room-code-chip strong { font-size: 26px; letter-spacing: .22em; }
.menu-row .chip-label { font-size: 13px; }
.menu-row .btn { width: 100%; justify-content: center; padding: 12px 16px; font-size: 15px; }
.menu-row .btn-copy-text { display: inline; }
.menu-row-split { justify-content: space-between; padding: 2px 6px; font-weight: 700; font-size: 15px; }
.menu-row-split .btn { width: auto; padding: 8px 16px; font-size: 20px; }
.menu-row-danger .btn { background: var(--red-soft); color: var(--red); }
/* 아이콘 버튼(프로필 · 내 정보 · 게임 끝내기 · 나가기): 헤더에서는 아이콘만(이름은 title/aria-label), 메뉴 시트에서는 아이콘 + 이름 */
.btn-ico { gap: 8px; }
.btn-ico .ico { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topbar .btn-ico { width: 38px; height: 38px; padding: 0; }
.topbar .btn-ico .btn-label { display: none; }
.topbar .btn-ico-danger { color: var(--red); }
.menu-row .btn-ico .ico { width: 20px; height: 20px; }
/* 채팅 시트: 기존 #chat-list / #chat-form 을 옮겨 넣는다 */
.sheet-chat-body { display: flex; flex-direction: column; }
.sheet-chat-body .chat-list { flex: 1 1 auto; min-height: 0; }
.sheet-chat-body .chat-form { flex: 0 0 auto; margin-top: 8px; }

/* =====================================================================
   모바일 (≤639px · ≤767px 세로 또는 마우스 · 세로로 든 터치 태블릿 ≤1099px — 아이패드 세로)
   가로로 든 터치 기기(폰 가로 · 아이패드 가로, 폭 ≥ 640px)는 게임 중 "가로 게임 셸"(body.tablet-shell)을 쓴다.
   - 대기실: 일반 페이지 스크롤. 채팅은 바닥에 접힌 바(마지막 메시지 + 펼치기 → 채팅 시트).
   - 게임 중: 화면(visualViewport) 높이에 고정된 셸. 헤더(라운드·단어·타이머·⋯) → 턴 띠 → 캔버스(+툴바/상태, 넘치면 스크롤)
             → [관전자] 채팅 목록 + 바닥 고정 입력창 / [출제자] 캔버스 위 채팅 티커.
   - 컴팩트 모드(data-compact="1", 키보드로 visualViewport < 520px): 채팅 목록을 숨기고 캔버스를 4:3 유지하며 축소,
             최근 메시지는 캔버스 위 말풍선으로. 입력창은 visualViewport 바닥에 붙는다.
   #view-room 에는 client.js 가 data-phase / data-role / data-compact 를 붙여 준다.
   데스크톱(≥1100px)·가로 태블릿·좁은 데스크톱 창(768~1099px) 레이아웃은 건드리지 않는다.
   이 조건은 client.js 의 mobileMq 와 반드시 같아야 한다.
   ===================================================================== */
@media (max-width: 639px), (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (pointer: fine), (max-width: 1099px) and (orientation: portrait) and (pointer: coarse) {
  /* iOS: 16px 미만 입력창은 포커스 시 자동 확대되므로 모든 입력을 16px 이상으로 */
  input[type="text"], textarea, select { font-size: 16px; }

  /* ---- 공통: 여백 축소 ---- */
  .room { padding: 8px 8px 12px; }
  .panel { border-radius: 14px; }
  .room-grid { gap: 8px; }

  /* ---- 상단바: 2행 그리드. 1행 라운드 · 타이머 · ⋯ / 2행 단어(마스크·카테고리). 컨테이너 3개는 display:contents 로 풀어 자식이 직접 그리드에 놓인다.
       방 코드·초대·효과음·나가기는 JS 가 메뉴 시트로 옮긴다(대기실에서는 코드·초대만 헤더에 남김) ---- */
  .topbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "round timer menu" "word word word";
    align-items: center; gap: 4px 8px; padding: 6px 10px; min-height: 0; margin-bottom: 8px;
  }
  .topbar-left, .topbar-center, .topbar-right { display: contents; }
  .room-code-chip { grid-area: code; padding: 4px 9px; gap: 6px; }
  .room-code-chip strong { font-size: 15px; letter-spacing: .12em; }
  .chip-label { font-size: 11px; }
  #btn-copy { grid-area: copy; }
  .round-indicator { grid-area: round; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .word-area { grid-area: word; min-height: 0; gap: 6px; max-width: 100%; }
  .timer { grid-area: timer; width: 38px; height: 38px; font-size: 16px; border-width: 3px; }
  .btn-menu { grid-area: menu; display: inline-flex; width: 36px; height: 36px; padding: 0; font-size: 20px; line-height: 1; }
  .topbar .btn-sm { padding: 6px 9px; font-size: 12px; }
  .topbar .btn-icon { padding: 6px 8px; font-size: 15px; }
  .btn-screen { display: none !important; } /* 진행자 화면은 방장 PC 전용 */
  .room[data-phase="lobby"] .topbar { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "code copy . menu"; }
  .room[data-phase="lobby"] .timer, .room[data-phase="lobby"] .word-area, .room[data-phase="lobby"] .round-indicator { display: none; }
  .word-hint { font-size: 13px; }
  /* 마스크: 글자 수(data-len → data-size s/m/l)에 따라 칸을 줄이고 2줄까지 감싼다 */
  .mask-wrap { display: inline-flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 2px 6px; max-width: 100%; }
  .mask-wrap .mask-len, .mask-wrap .word-category { margin-bottom: 4px; }
  .mask { flex-wrap: wrap; justify-content: center; gap: 4px; row-gap: 4px; max-width: 100%; }
  .mask-box { width: 26px; height: 30px; font-size: 19px; }
  .mask-wrap[data-size="m"] .mask-box { width: 20px; height: 26px; font-size: 16px; border-bottom-width: 2px; }
  .mask-wrap[data-size="l"] .mask-box { width: 16px; height: 22px; font-size: 13px; border-bottom-width: 2px; }
  .mask-wrap[data-size="m"] .mask-gap, .mask-wrap[data-size="l"] .mask-gap { width: 8px; }
  .mask-len { font-size: 12px; margin-left: 0; white-space: nowrap; }
  .word-category { margin-left: 0; font-size: 11px; }
  /* 출제자의 단어: 길면 줄어들고 줄바꿈 */
  .word-secret { flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px; max-width: 100%; }
  .word-secret .word { font-size: clamp(16px, 5.2vw, 22px); line-height: 1.2; overflow-wrap: anywhere; word-break: break-all; text-align: center; }
  .word-secret .label { font-size: 11px; }
  .word-answer { font-size: 17px; overflow-wrap: anywhere; text-align: center; }

  /* ---- 플레이어(대기실): 44px 한 줄 칩, 가로 스크롤 + 오른쪽 페이드 힌트(.has-more 는 client.js 가 토글) ---- */
  .players-panel { position: relative; padding: 5px 8px; }
  .players-panel::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 34px; pointer-events: none;
    border-radius: 0 14px 14px 0; opacity: 0; transition: opacity .2s;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--card) 70%);
  }
  .players-panel.has-more::after { opacity: 1; }
  .player-list { gap: 6px; padding-bottom: 0; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; }
  .player-list::-webkit-scrollbar { display: none; }
  .player { grid-template-columns: 28px 1fr auto; gap: 6px; padding: 3px 9px 3px 3px; scroll-snap-align: start; }
  .player .avatar { width: 28px; height: 28px; font-size: 16px; }
  .player .pinfo { gap: 5px; }
  .player .pname { font-size: 13px; max-width: 96px; }
  .player .pscore { font-size: 11px; }
  .player .badge-drawer { width: 18px; height: 18px; font-size: 10px; right: -5px; bottom: -5px; }
  .player .badge-next { width: 15px; height: 15px; font-size: 8px; left: -5px; top: -5px; }
  .player .next-tag, .player .offline-tag { font-size: 10px; padding: 0 5px; }
  .player .kick { width: 22px; height: 22px; font-size: 12px; opacity: 1; margin-left: -4px; }
  .react-pop { left: 14px; font-size: 18px; }

  /* ---- 플레이어(게임 중): 목록 대신 한 줄 턴 띠 "✏️ 민수 그리는 중 · 다음 지은 · 정답 2/4 ›" → 플레이어 시트 ---- */
  .room:not([data-phase="lobby"]) .players-panel { padding: 0; background: transparent; box-shadow: none; align-self: stretch; }
  .room:not([data-phase="lobby"]) .players-panel::after { display: none; }
  .room:not([data-phase="lobby"]) #player-list { display: none; }
  .room:not([data-phase="lobby"]) .turn-strip { display: flex; }
  .turn-strip {
    position: relative; align-items: center; gap: 6px; width: 100%; min-height: 38px; padding: 6px 10px 6px 12px;
    border: 0; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-sm);
    font-weight: 700; font-size: 13px; color: var(--text); text-align: left;
  }
  .ts-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ts-text b { font-weight: 900; }
  .ts-text .ts-av { display: inline-grid; width: 20px; height: 20px; font-size: 12px; vertical-align: -5px; margin-right: 5px; box-shadow: none; }
  .ts-sep { color: var(--muted); margin: 0 5px; font-weight: 500; }
  .ts-muted { color: var(--muted); font-weight: 600; }
  .ts-guessed { color: #1e9a62; }
  .ts-chev { flex: 0 0 auto; color: var(--muted); font-size: 20px; line-height: 1; margin-top: -2px; }
  .turn-strip .react-pop { position: absolute; right: 40px; left: auto; bottom: 30%; transform: translate(0, 0); }

  /* 플레이어 시트 안의 목록은 데스크톱과 같은 세로 목록(순위·아바타·이름·점수·배지·강퇴) */
  .sheet .player-list { flex-direction: column; overflow: visible; gap: 8px; padding: 0 0 4px; }
  .sheet .player { grid-template-columns: 22px 40px 1fr auto; gap: 8px; padding: 8px 8px 8px 6px; border-radius: 14px; flex: none; scroll-snap-align: none; }
  .sheet .player .rank { display: block; }
  .sheet .player .avatar { width: 40px; height: 40px; font-size: 22px; }
  .sheet .player .pinfo { flex-direction: column; align-items: stretch; gap: 0; white-space: normal; }
  .sheet .player .pname { max-width: none; font-size: 14px; }
  .sheet .player .pscore { font-size: 12px; }
  .sheet .player .badge-drawer { width: 22px; height: 22px; font-size: 13px; right: -6px; bottom: -6px; }
  .sheet .player .badge-next { width: 18px; height: 18px; font-size: 10px; left: -6px; top: -6px; }
  .sheet .player .next-tag, .sheet .player .offline-tag { font-size: 11px; padding: 1px 6px; }
  .sheet .player .kick { width: 30px; height: 30px; font-size: 14px; opacity: 1; margin-left: 0; background: rgba(43, 45, 66, 0.06); }

  /* ---- 가운데: 캔버스 4:3 전체 폭 ---- */
  .center-panel { padding: 8px; gap: 8px; }
  .canvas-wrap { border-radius: 10px; }

  /* 관전자 상태 띠: [✏️ ○○님이 그리고 있어요][👍👎][⤢ 펼치기] — 펼치기 버튼은 JS 가 채팅 바에서 옮겨 온다 */
  .draw-status { min-height: 36px; padding: 4px 6px 4px 10px; font-size: 13px; gap: 8px; flex-wrap: nowrap; justify-content: flex-start; }
  .draw-status-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  .react-bar { flex: 0 0 auto; }
  .react-btn { width: 36px; height: 30px; }
  .draw-status .btn-chat-expand { flex: 0 0 auto; padding: 5px 9px; font-size: 12px; }

  /* ---- 툴바(출제자): 2줄 격자.
       1줄: 펜·지우개·채우기 | 현재 색 | 되돌리기·전체 지우기
       2줄: 팔레트(가로 스크롤 한 줄, 커스텀 색 포함) | 굵기 4개 ---- */
  .toolbar {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: auto auto;
    grid-template-areas: "tools color . edit" "palette palette palette sizes";
    gap: 6px 8px; padding: 8px; align-items: center; border-radius: 12px;
  }
  .toolbar .tool-group:first-of-type { grid-area: tools; } /* of-type: 잠김 안내 span(#toolbar-lock)이 끼어도 그대로 */
  .toolbar .tool-group:last-of-type { grid-area: edit; justify-self: end; }
  .toolbar .tool-group { gap: 4px; }
  .toolbar .tool { width: 36px; height: 36px; border-radius: 10px; }
  .toolbar .tool svg { width: 20px; height: 20px; }
  .current-color { grid-area: color; width: 36px; height: 36px; border-radius: 10px; }
  .palette {
    grid-area: palette; display: flex; flex-wrap: nowrap; gap: 5px; min-width: 0;
    overflow-x: auto; padding: 3px 2px; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), rgba(0, 0, 0, .25));
    mask-image: linear-gradient(90deg, #000 calc(100% - 22px), rgba(0, 0, 0, .25));
  }
  .palette::-webkit-scrollbar { display: none; }
  .swatch { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; }
  .swatch:hover { transform: none; }
  .sizes { grid-area: sizes; gap: 4px; justify-self: end; }
  .size-btn { width: 30px; height: 30px; }
  .size-btn i { transform: scale(.8); }
  /* 태블릿 세로: 굵기를 1줄로 올리고 팔레트는 2줄 전체 폭(넘치면 줄바꿈) — 가로 스크롤로 끝 색이 잘리지 않게, 버튼은 조금 크게 */
  .room[data-tablet="1"] .toolbar { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "tools color . sizes edit" "palette palette palette palette palette"; }
  .room[data-tablet="1"] .palette { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .room[data-tablet="1"] .swatch { width: 30px; height: 30px; }
  .room[data-tablet="1"] .toolbar .tool, .room[data-tablet="1"] .current-color { width: 42px; height: 42px; }
  .room[data-tablet="1"] .size-btn { width: 36px; height: 36px; }
  .room[data-tablet="1"] .size-btn i { transform: none; }

  /* ---- 채팅 패널 공통 ---- */
  .chat-panel { padding: 8px 10px 10px; height: auto; max-height: none; }
  .chat-panel .panel-title { display: none; }
  .chat-list { min-height: 0; gap: 4px; padding: 2px 0; overscroll-behavior: contain; }
  /* 메시지가 적을 때 목록 바닥에 붙인다(justify-content:flex-end 는 스크롤을 망가뜨리므로 margin-top:auto 로) */
  .chat-list > :first-child { margin-top: auto; }
  .msg { font-size: 14px; padding: 5px 9px; }
  .msg-system { font-size: 12px; padding: 1px 4px; }
  .chat-form { margin-top: 6px; gap: 6px; }
  .chat-form input { padding: 9px 12px; }
  .chat-form .btn { padding: 0 14px; }
  .chat-bar { display: flex; align-items: center; gap: 8px; min-height: 32px; }
  .chat-bar-last { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--muted); }
  .btn-chat-expand { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; }
  .room:not([data-phase="lobby"]) .chat-bar { display: none; }

  /* ---- 대기실: 페이지 스크롤. 모드/설정이 먼저, 그 아래 미니 채팅(최근 최대 5줄 + 입력창).
     목록이나 입력창을 터치하면 채팅 시트가 열린다(실제 목록·입력은 시트로 옮겨진다) ---- */
  .room[data-phase="lobby"] .chat-panel { padding: 8px 10px 10px; }
  .room[data-phase="lobby"] .chat-panel > .chat-list { display: flex; max-height: 160px; min-height: 40px; overflow-y: auto; cursor: pointer; }
  .room[data-phase="lobby"] .chat-panel > .chat-form { display: flex; }
  .room[data-phase="lobby"] .chat-bar { display: none; }
  .room[data-phase="lobby"] .btn-chat-expand .btn-chat-expand-text::before { content: "채팅 "; }
  .settings-panel { gap: 10px; }
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .setting select, .setting textarea { padding: 9px 11px; }
  .set-group { padding: 10px 12px; }
  .set-row { gap: 8px; }
  .step-btn { width: 42px; height: 42px; }
  .step-val { min-width: 56px; }
  .start-row { padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); }
  /* 글자를 입력하는 동안(키보드)은 고정을 풀어 입력칸이 버튼에 가리지 않게(client.js 가 .typing) */
  .settings-panel.typing .start-row { position: static; box-shadow: none; }
  /* 카테고리 창: 아래에서 올라오는 시트 모양 */
  .modal.modal-cats { align-items: end; padding: 0; }
  .modal-cats .modal-card.card-cats { width: 100%; max-height: 85%; border-radius: 22px 22px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); animation: cats-up .22s cubic-bezier(.2, .9, .3, 1); }
  .card-cats .cat-chip { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  /* 출제자 고르기 창도 같은 시트. 참가자가 많아도 화면 높이 안에서 목록만 스크롤(퍼센트 높이는 내용 높이 기준이라 vh 로) */
  .modal-drawers .modal-card.card-drawers { max-height: 85vh; max-height: 85dvh; }
  .mode-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mode-card { padding: 14px 14px 12px; gap: 6px; }
  .mode-icon { font-size: 26px; }
  .btn-xl { padding: 14px 22px; font-size: 18px; }

  /* ---- 게임 중(choosing/drawing/turnEnd/gameOver): visualViewport 높이에 고정된 셸.
       --vvh/--vvt 는 client.js 가 visualViewport(resize/scroll) 로 유지한다. iOS 에서 키보드가 열려 페이지가 밀리면 --vvt 로 따라간다. ---- */
  .room:not([data-phase="lobby"]) {
    position: fixed; left: 0; right: 0; top: 0; width: auto; max-width: none; margin: 0;
    height: 100vh; height: var(--vvh, 100dvh); min-height: 0;
    transform: translateY(var(--vvt, 0px));
    overflow: hidden; display: flex; flex-direction: column;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  body.game-shell { overflow: hidden; min-height: 0; height: 100vh; height: var(--vvh, 100dvh); }
  .room:not([data-phase="lobby"]) .topbar { flex: 0 0 auto; }
  .room:not([data-phase="lobby"]) .room-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  .room:not([data-phase="lobby"]) .players-panel { flex: 0 0 auto; }
  /* 가운데(캔버스 + 툴바/상태 띠): 남는 높이보다 크면 찌부러지지 않고 내부 스크롤 */
  .room:not([data-phase="lobby"]) .center-panel { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* 데스크톱의 800px 상한은 풀어 둔다(세로 태블릿에서 화면 폭을 다 쓰도록. 폰은 원래 800px 보다 좁다) */
  .room:not([data-phase="lobby"]) .canvas-wrap { flex: 0 0 auto; max-width: none; }
  .room:not([data-phase="lobby"]) .toolbar,
  .room:not([data-phase="lobby"]) .draw-status { flex: 0 0 auto; max-width: none; }
  /* 출제자: 채팅 패널은 흐름에서 빼고(캔버스 위 티커로 대체) 가운데 패널이 남은 높이를 채운다.
     툴바(팔레트)는 화면 하단에 고정되고, 캔버스는 그 위 남는 높이의 중앙에 4:3 으로 최대 크기로 놓인다. */
  /* 출제자: 가운데 패널은 캔버스+팔레트만 담고 내용 크기만큼(하단 묶음). 남는 높이는 아래 채팅 버블 카드가 차지한다 */
  .room:not([data-phase="lobby"])[data-role="drawer"] .center-panel { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  /* 출제자 채팅 버블 카드: 턴 띠 ↔ (캔버스+팔레트) 사이의 독립 패널. 남는 높이를 채우고 최근 메시지 3개를 아래 정렬. 누르면 채팅 시트 */
  .room:not([data-phase="lobby"])[data-role="drawer"] .drawer-chat {
    display: flex; flex: 0 0 auto; min-height: 44px; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px;
    overflow: hidden; padding: 8px 12px; border: 0; text-align: left; width: 100%;
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  }
  .drawer-chat:active { background: #f8f6fc; }
  .drawer-chat .chat-bubble { -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
  .drawer-chat .dc-empty { font-size: 12px; color: var(--muted); font-weight: 700; align-self: center; }
  .room:not([data-phase="lobby"])[data-role="drawer"] .chat-ticker { display: none !important; } /* 티커는 버블 영역으로 대체(뒤의 inline-flex 규칙보다 우선) */
  .room:not([data-phase="lobby"])[data-role="drawer"] .chat-panel { display: none; }
  /* 캔버스 래퍼는 4:3 을 유지한 채 JS(fitDrawerCanvas)가 준 --dw 너비로 놓이고, 위아래 auto 마진으로 남는 높이 중앙에 온다.
     티커(.chat-ticker)는 래퍼 기준이므로 항상 캔버스 위에 겹친다. */
  /* 남는 여백은 캔버스 카드 위쪽으로 보내고(margin-top:auto) 캔버스와 팔레트는 바닥에 붙은 한 묶음으로 */
  .room:not([data-phase="lobby"])[data-role="drawer"] .canvas-wrap { flex: 0 0 auto; margin: auto auto 0; width: var(--dw, 100%); max-width: 100%; }
  .room:not([data-phase="lobby"])[data-role="drawer"] .toolbar { flex: 0 0 auto; margin-top: 0; position: sticky; bottom: 0; }
  /* 관전자: 채팅 패널이 남은 높이를 전부 차지(목록만 내부 스크롤), 입력줄은 바닥 고정.
     최소 128px = 패딩 14 + 목록 2줄 56 + 여백 6 + 입력줄 ~46 — 이보다 모자라면 가운데 패널이 스크롤로 양보한다 */
  .room:not([data-phase="lobby"])[data-role="guesser"] .chat-panel { flex: 1 1 0; min-height: 128px; display: flex; flex-direction: column; padding: 6px 10px 8px; }
  .room:not([data-phase="lobby"])[data-role="guesser"] .chat-panel > .chat-list { flex: 1 1 auto; min-height: 56px; }
  .room:not([data-phase="lobby"])[data-role="guesser"] .chat-panel > .chat-form { flex: 0 0 auto; margin-top: 6px; }

  /* 출제자용 채팅 티커: 캔버스 왼쪽 아래 한 줄. 새 메시지에 .fresh 로 진해지고 ~4초 뒤 옅어진다(누르면 채팅 시트) */
  .chat-ticker {
    position: absolute; left: 8px; bottom: 8px; z-index: 2; max-width: calc(100% - 16px);
    align-items: center; gap: 6px; padding: 6px 11px; border: 0; border-radius: 999px;
    background: rgba(43, 45, 66, 0.72); color: #fff; font-size: 13px; font-weight: 700; text-align: left;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: .5; transition: opacity .7s ease, background .2s;
  }
  .room:not([data-phase="lobby"])[data-role="drawer"] .chat-ticker { display: inline-flex; }
  .chat-ticker.fresh { opacity: 1; transition: opacity .12s; }
  .chat-ticker .tk-icon { flex: 0 0 auto; }
  .chat-ticker .tk-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-ticker .tk-name { font-weight: 900; opacity: .9; margin-right: 4px; }
  .chat-ticker.kind-correct { background: rgba(30, 154, 98, 0.9); }
  .chat-ticker.kind-close { background: rgba(214, 140, 0, 0.9); }
  .chat-ticker.kind-system { background: rgba(108, 111, 133, 0.72); }
  .chat-ticker.kind-guessed { background: rgba(74, 120, 212, 0.88); }

  /* 관전자 컴팩트 모드 말풍선: 캔버스 아래쪽에 최근 2~3개 (라이브 방송 채팅 느낌) */
  .chat-bubbles { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
  .room:not([data-phase="lobby"])[data-role="guesser"][data-compact="1"] .chat-bubbles { display: flex; }
  .chat-bubble {
    max-width: 100%; padding: 4px 10px; border-radius: 12px; background: rgba(43, 45, 66, 0.66); color: #fff;
    font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: bubble-in .2s ease-out;
  }
  /* 말풍선: 닉네임 한 줄(작게) · 내용 한 줄 — 긴 닉네임이 내용을 밀어내지 않게 */
  .chat-bubble .bb-name, .chat-bubble .bb-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-bubble .bb-name { font-size: 10px; font-weight: 800; opacity: .8; line-height: 1.25; }
  .chat-bubble.kind-correct { background: rgba(30, 154, 98, 0.88); }
  .chat-bubble.kind-close { background: rgba(214, 140, 0, 0.88); }
  .chat-bubble.kind-system { background: rgba(108, 111, 133, 0.62); font-style: italic; font-weight: 500; }
  .chat-bubble.kind-guessed { background: rgba(74, 120, 212, 0.85); }
  .chat-bubble.mine { background: rgba(61, 123, 242, 0.78); }
  /* 키패드 컴팩트(맞히는 사람) 말풍선: 위치별 불투명도(배경+글자) 70/45/15% + 3초 뒤 페이드 아웃(시작 시점은 JS가 animation-delay로) */
  .chat-bubble.bb-timed { animation: bubble-fade .4s ease-in forwards; }
  .chat-bubble.bb-pos0 { --bo: .7; opacity: .7; }
  .chat-bubble.bb-pos1 { --bo: .45; opacity: .45; }
  .chat-bubble.bb-pos2 { --bo: .15; opacity: .15; }
  @keyframes bubble-fade { from { opacity: var(--bo, .7); } to { opacity: 0; } }
  @keyframes bubble-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* ---- 컴팩트 모드(키보드 열림, 관전자): 채팅 목록·상태 띠를 숨기고 캔버스가 4:3 을 지키며 남은 높이에 맞게 줄어든다(최소 120px).
       캔버스 폭은 화면 폭을 넘지 않게 max-height 로 묶어 letterbox 가 생기지 않는다. 입력줄은 그대로 바닥(visualViewport 하단). ---- */
  .room:not([data-phase="lobby"])[data-role="guesser"][data-compact="1"] .chat-panel > .chat-list { display: none; }
  .room:not([data-phase="lobby"])[data-role="guesser"][data-compact="1"] .chat-panel { flex: 0 0 auto; min-height: 0; padding-top: 8px; }
  .room:not([data-phase="lobby"])[data-role="guesser"][data-compact="1"] .chat-panel > .chat-form { margin-top: 0; }
  .room:not([data-phase="lobby"])[data-role="guesser"][data-compact="1"] .draw-status { display: none; }
  .room:not([data-phase="lobby"])[data-role="guesser"][data-compact="1"] .center-panel { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 6px; position: relative; }
  /* 말풍선은 캔버스 폭이 아니라 패널 폭에 맞춰(캔버스 아래쪽에 겹치게) — 캔버스 래퍼의 position 을 풀어 패널 기준으로 놓는다 */
  .room:not([data-phase="lobby"])[data-role="guesser"][data-compact="1"] .canvas-wrap { position: static; }
  .room:not([data-phase="lobby"])[data-role="guesser"][data-compact="1"] .chat-bubbles { left: 10px; right: 10px; bottom: 10px; }
  .room:not([data-phase="lobby"])[data-role="guesser"][data-compact="1"] .canvas-wrap {
    flex: 1 1 auto; min-height: 120px; width: auto; max-width: 100%; max-height: calc((100vw - 28px) * 0.75); aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
  }
  .room:not([data-phase="lobby"])[data-role="guesser"][data-compact="1"] #canvas { width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; }

  /* ---- 태블릿 세로(폭 ≥ 700px) 출제자: 관전자와 같은 배치 — 캔버스 폭 가득 → 도구 모음 → 채팅 목록 + 입력줄(남는 높이).
       폰 출제자의 "채팅 버블 카드 + 바닥 팔레트" 배치는 좁은 화면용이라 태블릿에서는 쓰지 않는다 ---- */
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"] .drawer-chat { display: none; }
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"] .center-panel { flex: 0 1 auto; overflow-y: auto; display: flex; flex-direction: column; }
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"] .canvas-wrap { width: 100%; max-width: none; margin: 0 auto; }
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"] .toolbar { position: static; margin-top: 0; }
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"] .chat-panel { display: flex; flex: 1 1 0; min-height: 128px; flex-direction: column; padding: 6px 10px 8px; }
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"] .chat-panel > .chat-list { flex: 1 1 auto; min-height: 56px; }
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"] .chat-panel > .chat-form { flex: 0 0 auto; margin-top: 6px; }
  /* 키보드가 열리면(컴팩트): 관전자처럼 채팅 목록을 숨기고 캔버스를 4:3 으로 줄여 캔버스 · 도구 모음 · 입력줄을 한 화면에 */
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"][data-compact="1"] .chat-panel > .chat-list { display: none; }
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"][data-compact="1"] .chat-panel { flex: 0 0 auto; min-height: 0; padding-top: 8px; }
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"][data-compact="1"] .chat-panel > .chat-form { margin-top: 0; }
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"][data-compact="1"] .center-panel { flex: 1 1 auto; overflow: hidden; align-items: center; padding: 6px; position: relative; }
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"][data-compact="1"] .canvas-wrap { position: relative; flex: 1 1 auto; min-height: 120px; width: auto; max-width: 100%; max-height: calc((100vw - 28px) * 0.75); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"][data-compact="1"] #canvas { width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; }
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"][data-compact="1"] .toolbar { flex: 0 0 auto; width: 100%; }
  .room:not([data-phase="lobby"])[data-tablet="1"][data-role="drawer"][data-compact="1"] .chat-bubbles { display: flex; left: 8px; right: 8px; bottom: 8px; } /* 말풍선은 캔버스 안 아래쪽(도구 모음을 가리지 않게) */

  /* 토스트: 바닥에 두면 채팅 입력창을 가리므로 모바일에서는 위쪽에 띄운다 */
  .toasts { top: calc(10px + env(safe-area-inset-top, 0px)); bottom: auto; }
  .toast { transform: translateY(-10px); }
  .toast.show { transform: translateY(0); }

  /* ---- 오버레이(단어 선택 / 턴 종료): 캔버스 안이 아니라 셸 전체를 덮는다(셸이 transform 을 가지므로 fixed 기준 = 셸) ---- */
  .overlay { position: fixed; inset: 0; z-index: 40; padding: 16px; align-items: center; line-height: 1.45; }
  .card { width: min(100%, 420px); max-height: calc(100vh - 32px); max-height: calc(var(--vvh, 100dvh) - 32px); padding: 18px 16px; gap: 12px; }
  .card-wide { width: min(100%, 560px); }
  .card-title { font-size: 20px; }
  .word-option { font-size: 17px; padding: 11px 16px; max-width: 100%; overflow-wrap: anywhere; }
  .pick-option { font-size: 16px; padding: 9px 8px; } /* 이어 그리기 후보 8개도 2열로 한 화면에 */
  .ranking-list { max-height: none; overflow: visible; }
  .podium-slot .avatar { width: 40px; height: 40px; font-size: 22px; }
  .podium-slot .pname { font-size: 13px; }

  /* ---- 모달(결과 / 갤러리): visualViewport 높이 기준, 카드 안에서 스크롤 ---- */
  .modal {
    inset: auto; left: 0; right: 0; top: 0; height: 100vh; height: var(--vvh, 100dvh); transform: translateY(var(--vvt, 0px));
    padding: 10px; align-items: start; padding-top: max(10px, env(safe-area-inset-top, 0px));
  }
  .modal-card { max-height: calc(100vh - 20px); max-height: calc(var(--vvh, 100dvh) - 20px); padding: 12px 12px 14px; gap: 10px; }
  .card-results { overflow-y: auto; -webkit-overflow-scrolling: touch; gap: 8px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .card-results .ranking-list { max-height: none; overflow: visible; flex: 0 0 auto; }
  .card-results .podium { flex: 0 0 auto; }
  .card-results .podium-slot.p1 .podium-bar { height: 48px; }
  .card-results .podium-slot.p2 .podium-bar { height: 34px; }
  .card-results .podium-slot.p3 .podium-bar { height: 24px; }
  .results-actions { flex: 0 0 auto; width: 100%; }
  .results-actions .btn { flex: 1 1 auto; }
  .modal-head { gap: 8px; }
  .modal-head .card-title { font-size: 18px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gallery-meta { padding: 8px 10px 10px; gap: 4px; }
  .gallery-word { font-size: 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
  .gallery-word .gallery-cat { margin-left: 0; }
  .gallery-sub { flex-direction: column; align-items: stretch; gap: 6px; }
  .gallery-by { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gallery-sub .btn { align-self: flex-end; }
}

/* =====================================================================
   계정 — 로그인(랜딩) · 계정 칩 · 내 정보(모달/시트) · 단어 세트
   로그인 기능이 꺼져 있으면 관련 노드는 모두 hidden 이라 아무것도 그려지지 않는다.
   ===================================================================== */
.auth-buttons { display: flex; flex-direction: column; gap: 10px; }
/* 시작 단계 버튼 3개는 카카오 규정(모서리 12px)에 맞춰 같은 모양으로 */
.step-start .btn { border-radius: 12px; gap: 8px; }
/* Google 브랜드 가이드(라이트): 흰 배경 · 1px #747775 테두리 · 글자 #1F1F1F · 공식 4색 G 로고 */
.btn-google { background: #fff; color: #1f1f1f; box-shadow: inset 0 0 0 1px #747775; }
.btn-google:hover:not(:disabled) { background: #f8f9fa; }
.g-logo { flex: 0 0 auto; display: block; }
/* 카카오 로그인 디자인 가이드: 컨테이너 #FEE500 · 모서리 12px · 심볼(말풍선) #000000 · 레이블 #000000 85% · 시스템 폰트.
   색을 바꾸지 않도록 hover 는 색 대신 옅은 그림자로만 표시한다 */
.btn-kakao { background: #FEE500; color: rgba(0, 0, 0, 0.85); box-shadow: none; }
.btn-kakao:hover:not(:disabled) { background: #FEE500; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.k-symbol { flex: 0 0 auto; display: block; }
.k-label { font-family: -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
/* 프로필 사진: 아바타 칸(.avatar · .me-avatar · .avatar-preview · .photo-preview · .acct-avatar)을 꽉 채우는 원 */
img.avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #fff; }
/* 세로로 긴 사진(카카오 프로필 등)이 grid 행을 늘려 타원으로 보이지 않게: 칸에 절대 위치로 딱 맞춘다 */
.has-img { position: relative; }
.has-img > img.avatar-img { position: absolute; inset: 0; }
/* 대기실 설정: 내 세트 도구 */
.wordset-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: -4px; }
.wordset-row:not(:has(> :not([hidden]))) { display: none; }
.wordset-tools { display: contents; }
.wordset-row .btn { flex: 0 0 auto; }
.wordset-quick { display: flex; gap: 8px; align-items: center; flex: 1 1 100%; min-width: 0; order: 3; }
.wordset-quick input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 13px; }
/* 대기실 설정: 단어 세트 링크(#ws=) 보내기 — 저장 버튼 옆 */
.wordset-share { display: contents; }

/* 내 세트 불러오기 dialog: 세트가 많으면 목록 안에서 스크롤 */
.modal-card.card-wsload { width: min(400px, 100%); gap: 10px; max-height: min(80vh, 520px); max-height: min(calc(var(--vvh, 100dvh) - 40px), 520px); }
.wsload-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; padding: 2px; }
.wsload-item { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; text-align: left; background: #f8f6fc; border: 0; border-radius: 14px; padding: 12px 14px; font: inherit; color: var(--text); cursor: pointer; }
.wsload-item:hover, .wsload-item:focus-visible { background: var(--secondary-soft); }
.wsload-name { font-size: 15px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsload-count { font-size: 12px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }

/* 내 정보 › 개인 설정(욕설 가리기 · 방송 모드) */
.me-prefs { display: flex; flex-direction: column; gap: 12px; }
.me-prefs .rs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.me-prefs .rs-label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 800; min-width: 0; }
.me-prefs .rs-label small { font-size: 12px; font-weight: 500; color: var(--muted); }
/* ---------- 내 정보(/me): 랜딩 카드를 넓혀 쓴다 ---------- */
.landing-card.is-wide { max-width: 680px; }
.landing-card.is-wide .logo { display: none; }
.me-page-head { position: relative; display: flex; align-items: center; min-height: 36px; }
.me-page-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 20px; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; }
.me-back { padding-left: 10px; }
.me-provider { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-btn[aria-selected="true"] { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(43, 45, 66, 0.10); }
.me-panel { display: flex; flex-direction: column; gap: 12px; min-height: 160px; }
.me-panel .acct-section { gap: 10px; }
.me-panel-note { font-size: 13px; color: var(--muted); }
.me-empty { display: grid; place-items: center; gap: 8px; text-align: center; padding: 32px 12px; color: var(--muted); font-size: 14px; line-height: 1.5; background: #f8f6fc; border-radius: 16px; }
.me-empty-icon { font-size: 36px; }
.me-foot { display: flex; justify-content: center; gap: 20px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; }
.me-foot .link-btn { padding: 6px 4px; }

/* ---------- 내 정보 › 그림(보관함) ---------- */
.drawings-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.drawings-tools { display: inline-flex; align-items: center; gap: 10px; }
.drawings-tools .link-btn { font-size: 12px; }
.drawings-full { font-size: 13px; font-weight: 700; color: #9a5b00; background: var(--amber-soft); border-radius: 12px; padding: 8px 12px; }
.drawings-error { color: var(--red); }
.drawings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.drawings-grid:empty { display: none; }
.drawing-item { background: #f8f6fc; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.drawing-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: #fff; cursor: zoom-in; border-bottom: 1px solid var(--line); }
.drawing-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.drawing-thumb .dt-missing { display: grid; place-items: center; height: 100%; font-size: 12px; color: var(--muted); }
.drawing-meta { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 4px; min-width: 0; }
.drawing-word { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawing-sub { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawing-actions { display: flex; gap: 4px; padding: 4px 8px 8px; }
.drawing-actions .btn { flex: 1 1 0; padding: 5px 6px; font-size: 12px; }
/* 크게 보기 */
.modal-drawing { z-index: 65; }
.card-drawing { width: min(860px, 100%); }
.dv-frame { background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; aspect-ratio: 4 / 3; max-height: 70vh; display: grid; place-items: center; }
.dv-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dv-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dv-meta { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--muted); }
/* 결과 화면: 보관함 저장 안내 */
.results-save { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; line-height: 1.5; border-radius: 14px; padding: 10px 12px; background: #f3fbf6; color: #1d6b43; }
.results-save.rs-saving { background: #f8f6fc; color: var(--muted); }
.results-save.rs-full { background: var(--amber-soft); color: #7a4a00; }
.results-save.rs-error { background: #fdecec; color: var(--red); }
.results-save.rs-skipped { background: #f8f6fc; color: var(--muted); }
.results-save .rs-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ---------- 방 안 프로필 수정(데스크톱 모달 / 모바일 시트) ---------- */
.modal-profile { z-index: 60; }
.card-room-profile { width: min(480px, 100%); }
.room-profile-body { overflow: auto; min-height: 0; padding: 2px 2px 10px; }
.room-profile-body .landing-step { gap: 16px; }
/* 긴 폼(이모지 모드)에서도 "저장"은 늘 보이게: 스크롤 영역 바닥에 붙인다 */
.room-profile-body #btn-profile-next { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 4px 0 var(--primary-deep), 0 -14px 14px 2px var(--card); }
/* 내 정보 모달(데스크톱) */
.modal-account { z-index: 55; }
.modal-card-account { width: min(640px, 100%); }
.account-modal-body { overflow: auto; min-height: 0; padding: 2px; }
.account-body { display: flex; flex-direction: column; gap: 20px; }
.acct-section { display: flex; flex-direction: column; gap: 10px; }
.acct-title { font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .02em; display: flex; align-items: baseline; gap: 6px; }
.acct-profile { display: flex; align-items: center; gap: 14px; }
.acct-avatar { width: 56px; height: 56px; font-size: 30px; overflow: hidden; flex: 0 0 auto; }
.acct-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.acct-fields .field-label small { font-weight: 500; }
.acct-nick-row { display: flex; gap: 8px; align-items: center; }
.acct-nick-row input { flex: 1 1 auto; min-width: 0; }
.acct-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.acct-provider { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 단어 세트 목록/폼 */
.wordset-list { display: flex; flex-direction: column; gap: 8px; }
.wordset-list:empty { display: none; }
.wordset-item { background: #f8f6fc; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ws-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ws-name { font-size: 15px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-meta { font-size: 12px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.ws-preview { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ws-actions .btn { padding: 6px 11px; font-size: 12px; }
.wordset-apply-hint { font-size: 12px; color: var(--muted); }
#btn-wordset-new { align-self: flex-start; }
.wordset-form { display: flex; flex-direction: column; gap: 8px; background: #fbfaff; border: 2px dashed var(--line); border-radius: 14px; padding: 12px; }
.ws-form-title { font-weight: 800; font-size: 14px; }
.ws-form-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-count { font-size: 12px; font-weight: 700; color: var(--muted); }
.ws-count.over { color: var(--red); }
.ws-error { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--red); font-weight: 700; }
.ws-error:empty { display: none; }
.ws-form-foot .btn:last-child { margin-left: auto; }
@media (max-width: 639px), (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (pointer: fine), (max-width: 1099px) and (orientation: portrait) and (pointer: coarse) {
  .sheet-panel-account { max-height: 92%; }
  .sheet-panel-account .account-body { padding: 2px 0 8px; gap: 16px; }
}

/* =====================================================================
   랜딩 2단계 — 1) 프로필(#landing-step-profile) → 2) 방(#landing-step-room)
   ===================================================================== */
.landing-step { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* 세션 복원 중: 로고 아래 작은 스피너만 */
.landing-loading { display: grid; place-items: center; min-height: 120px; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--secondary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 1단계: 시작 — 버튼만 */
.step-start { gap: 14px; padding-top: 4px; }
.step-start .divider { margin: 2px 0; }
/* 가입 고지(#30): 로그인 버튼 아래 · 내 정보 맨 아래. 작고 흐리게, 처리방침 링크만 밑줄 */
.login-consent { font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; margin: -4px 0 0; word-break: keep-all; }
.login-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.step-me .login-consent { margin-top: 0; }
/* 로그인 프로필: 사진 | 이모지 바로 아래 공개 범위 안내(#31) */
.profile-public-note { font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; margin: -8px 0 0; word-break: keep-all; }

/* 2단계(로그인): 사진 | 이모지 */
.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: #f3f0f8; border-radius: 999px;
}
.seg-btn {
  border: 0; background: transparent; border-radius: 999px; padding: 9px 0;
  font-size: 14px; font-weight: 800; color: var(--muted); transition: background .15s, color .15s, box-shadow .15s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn[aria-checked="true"] { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(43, 45, 66, 0.10); }
.photo-panel { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.photo-preview {
  width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; font-size: 56px;
  background: var(--av, #bae1ff); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08), var(--shadow-sm);
}
.photo-preview.has-img { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--line), var(--shadow-sm); }
.photo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.photo-hint { font-size: 12px; color: var(--muted); text-align: center; margin-top: -4px; }
.landing-step.is-photo .avatar-preview { display: none; }
.emoji-pickers { display: flex; flex-direction: column; gap: 18px; }
.landing-step.step-fwd { animation: step-in-fwd .24s cubic-bezier(.2, .8, .3, 1); }
.landing-step.step-back { animation: step-in-back .24s cubic-bezier(.2, .8, .3, 1); }
@keyframes step-in-fwd { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

/* 2단계: 내 프로필 요약 카드 */
.me-card { display: flex; flex-direction: column; gap: 10px; background: #f8f6fc; border-radius: 20px; padding: 14px; }
.me-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.me-avatar {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 28px;
  background: var(--av, #bae1ff); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.08), var(--shadow-sm);
}
.me-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.me-name { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-status { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.me-status .link-btn { padding: 2px; }
.me-main .btn, .me-account .btn { flex: 0 0 auto; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.me-main .btn:hover:not(:disabled), .me-account .btn:hover:not(:disabled) { background: #fbfaff; box-shadow: inset 0 0 0 1px #dcd5ea; }
.me-account { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }

/* 2단계: 초대받은 방 — 코드 카드 안에 "이 방에 참가하기"(#btn-join) */
.invite-card {
  display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px;
  background: linear-gradient(160deg, #fff5f0 0%, var(--primary-soft) 100%); box-shadow: inset 0 0 0 2px rgba(255, 107, 74, 0.16);
}
.invite-head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.invite-label { font-size: 13px; font-weight: 800; color: var(--primary-dark); }
.invite-code { font-family: var(--mono); font-size: 34px; font-weight: 800; letter-spacing: .3em; padding-left: .3em; line-height: 1.2; color: var(--text); }
.invite-full { margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: var(--amber-soft); color: #8a5a00; font-size: 13px; font-weight: 700; line-height: 1.4; text-align: center; }
.invite-card .join-row input { display: none; }
.invite-dismiss { align-self: center; margin-top: -8px; }
/* 받은 단어 세트 링크: 방 만들기 바로 위 */
.wordset-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #fffbea; box-shadow: inset 0 0 0 2px rgba(255, 216, 77, 0.55); }
.wordset-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wordset-card-label { font-size: 12px; font-weight: 800; color: #8a5a00; }
.wordset-card-name { font-size: 16px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.wordset-card-note { font-size: 12px; color: var(--muted); line-height: 1.4; }
.wordset-card .link-btn { flex: 0 0 auto; }

@media (max-width: 639px), (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (pointer: fine), (max-width: 1099px) and (orientation: portrait) and (pointer: coarse) {
  .landing { padding: 16px 12px 0; }
  .emoji-pickers { gap: 16px; }
  .seg-btn { padding: 10px 0; }
  .photo-actions .btn-sm { min-height: 38px; padding: 8px 14px; }
  .landing-card { max-width: none; padding: 24px 18px 20px; border-radius: 24px; gap: 16px; }
  .landing-step { gap: 16px; }
  .emoji-btn { padding: 9px 0; }
  .color-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  .color-btn { width: 100%; max-width: 40px; height: auto; aspect-ratio: 1 / 1; justify-self: center; }
  .me-main .btn-sm, .me-account .btn-sm { min-height: 38px; padding: 8px 12px; }
  .me-account .link-btn, .invite-dismiss, .wordset-card .link-btn { min-height: 38px; padding: 8px 6px; }
  .invite-code { font-size: 30px; }
}

/* 이어 그리기 — 모바일(위 모바일 블록과 같은 조건). 상단 띠는 턴 띠가 대신하고, 조합 마스크·제시어는 360px 에서 넘치지 않게 줄인다 */
@media (max-width: 639px), (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (pointer: fine), (max-width: 1099px) and (orientation: portrait) and (pointer: coarse) {
  .relay-band { display: none !important; }
  /* 맞히는 사람의 힌트 버튼은 헤더 1행(라운드 · 힌트 · 타이머 · ⋯)에 — 키보드가 올라와 상태 띠가 숨어도 누를 수 있고 헤더 높이가 늘지 않는다 */
  .relay-row { display: contents; }
  .room:not([data-phase="lobby"]) .topbar.has-relay-hint { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "round hint timer menu" "word word word word"; }
  .relay-hint { grid-area: hint; padding: 6px 10px; font-size: 12px; min-height: 32px; }
  .relay-hint .rh-long { display: none; }
  .relay-hint .rh-short { display: inline; }
  .mask-part { flex-wrap: nowrap; gap: 3px; }
  .mask-combo .mask { column-gap: 2px; }
  .mask-sep { font-size: 14px; padding: 0 1px; }
  .word-secret.relay-word .word { font-size: clamp(15px, 4.6vw, 20px); word-break: keep-all; }
  .toolbar-lock { font-size: 13px; padding: 0 8px; }
  .relay-banner-title { font-size: 38px; }
  .relay-banner-word { font-size: 23px; }
}

/* ---------- 행사 모드·큰 방 (PROTOCOL "행사 모드·큰 방") ---------- */
/* 대기실 설정 위 상태 줄(모두): "🎪 행사 모드 · 최대 N명 · 18:30까지" + (비방장) 출제자 줄 */
.event-status { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--amber-soft); box-shadow: inset 0 0 0 2px rgba(244, 163, 0, .25); }
.event-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.event-status-text { font-size: 14px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.event-drawers { font-size: 13px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.event-error { font-size: 13px; font-weight: 700; color: var(--red); overflow-wrap: anywhere; }
/* 대기실 "행사 모드" 스위치(이용권이 있는 방장) */
.event-switch-row { cursor: default; min-height: 44px; }
.event-switch-row .switch:disabled { opacity: .5; cursor: default; }
.mode-card.event-off { opacity: .45; }
.mode-card.event-off .mode-meta { color: var(--muted); }

/* 행사 이용권 칸(내 정보 · 방 안 ⚙ 설정): 제목 · 상태 한 줄 · 코드 입력 + 등록 · 오류 */
.pass-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.pass-card[hidden] { display: none; }
.rs-row.pass-card { justify-content: flex-start; }
.pass-title { font-size: 14px; font-weight: 800; color: var(--text); }
.pass-status { font-size: 13px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.pass-status.pass-on { color: var(--secondary-dark); font-weight: 700; }
.pass-form { display: flex; gap: 8px; align-items: center; }
.pass-form[hidden] { display: none; }
.pass-form input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
.pass-form input::placeholder { text-transform: none; letter-spacing: 0; }
.pass-form .btn { flex: 0 0 auto; min-height: 40px; }

/* 출제자 고르기 창(카테고리 창과 같은 틀 — 폰은 아래 시트): 참가자 한 줄씩, 고른 순서 번호 ①②…, 6명이 차면 나머지 흐리게 */
.modal-card.card-drawers { width: min(440px, 100%); }
.drawers-list { list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.drawer-opt {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-height: 48px; border: 0; border-radius: 14px;
  background: #fff; box-shadow: inset 0 0 0 2px var(--line); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer;
  transition: box-shadow .15s, background .15s;
}
.drawer-opt:hover:not(:disabled) { background: #f3effb; }
.drawer-opt.on { background: var(--secondary-soft); box-shadow: inset 0 0 0 2px var(--secondary); color: var(--secondary-dark); }
.drawer-opt:disabled { opacity: .45; cursor: default; }
.drawer-opt:focus-visible { outline: 3px solid var(--secondary-soft); outline-offset: 2px; }
.drawer-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 900; box-shadow: inset 0 0 0 2px #cfc8de; color: var(--secondary-dark); }
.drawer-opt.on .drawer-num { background: var(--secondary); box-shadow: none; color: #fff; }
.drawer-opt .drawer-av { width: 32px; height: 32px; font-size: 18px; flex: 0 0 auto; }
.drawer-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawers-actions { display: flex; gap: 8px; justify-content: flex-end; flex: 0 0 auto; }
.drawers-actions .btn { min-height: 44px; }
/* 큰 방 접기: "외 n명 ▾" / "접기 ▴" · 10위 밖의 내 줄 앞 구분 */
.player-more { list-style: none; display: flex; }
.player-more-btn { width: 100%; justify-content: center; color: var(--muted); font-weight: 800; }
.player-gap, .ranking-gap { list-style: none; text-align: center; color: var(--muted); font-size: 12px; line-height: 1; }
.ranking-row.me { background: var(--secondary-soft); }
.ranking-more { align-self: center; font-weight: 800; }

@media (max-width: 639px), (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (pointer: fine), (max-width: 1099px) and (orientation: portrait) and (pointer: coarse) {
  /* 대기실 가로 띠: "외 n명" 도 알약 하나 */
  .player-list .player-more { flex: 0 0 auto; align-items: center; }
  .player-list .player-more-btn { width: auto; white-space: nowrap; border-radius: 999px; min-height: 34px; padding: 4px 12px; }
  .player-list .player-gap { flex: 0 0 auto; align-self: center; padding: 0 2px; }
  .sheet .player-list .player-more-btn { width: 100%; }
  .drawers-actions .btn { flex: 1 1 0; }
  .event-status { padding: 8px 10px; }
  .event-status-text { font-size: 13px; }
}
.ranking-me-wrap { width: 100%; }