/* 너와 함께 — 귀엽고 부드러운 파스텔 UI, 세로 모바일 우선 */
:root {
  --bg: #FFF6F1;
  --bg2: #FFEDE6;
  --card: #FFFFFF;
  --pink: #FF8FAB;
  --pink-dark: #E86A8C;
  --pink-soft: #FFE1EA;
  --blue: #7FB8E6;
  --blue-dark: #5A9AD1;
  --blue-soft: #E1F0FB;
  --yellow: #FFD166;
  --yellow-soft: #FFF3D1;
  --mint: #8FDDBB;
  --mint-soft: #E0F7EC;
  --mint-dark: #3E9E78;
  --purple: #C3A6F2;
  --green: #9BD48A;
  --orange: #FFB26B;
  --teal: #6FD6D0;
  --red: #FF7B7B;
  --text: #4A3B44;
  --muted: #9C8A94;
  --line: #F6DCE4;
  --shadow: 0 8px 24px rgba(255, 143, 171, .18);
  --radius: 22px;
  --radius-sm: 14px;
  --font-display: 'Jua', 'Gowun Dodum', system-ui, sans-serif;
  --font-body: 'Gowun Dodum', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
:root { --tint: #FFF8FA; --amber-text: #8A5A12; --faint: #C9BFC4; }
/* ── 어두운 화면 ── 기기 설정을 따르거나(기본) 하트 메뉴에서 고정한다(index.html 첫 스크립트·app.js applyTheme 가 html.dark 를 켠다).
   바탕·카드·글자만 뒤집고, 판·말·카드 그림은 물건이라 밝은 채로 둔다 (체스판·루미루미 타일·주사위). 밤에 침대에서 하는 커플이 많아서 */
/* 2026-09-30 다시 맞춤: 갈색 섞인 자주(#1E1720·#2C2231)라 화면 전체가 탁했다 → 색기를 뺀 숯색 바탕 + 한 단계씩 밝아지는 카드(아이폰 다크처럼),
   분홍·파랑·노랑·민트 바탕은 채도를 살려 팥죽색·올리브색이 안 나게 */
html.dark {
  --bg: #121116; --bg2: #18171D; --card: #1F1E25; --tint: #2A2831; --text: #F5F3F8; --muted: #A9A5B3; --line: #37343F;
  --pink-soft: #402232; --blue-soft: #1A2A3E; --yellow-soft: #3A2F18; --mint-soft: #14342A; --mint-dark: #7FD9B0;
  --pink-dark: #FF8FB0; --blue-dark: #8CC2F0;
  --amber-text: #FFD68A; --faint: #57535F; --shadow: 0 8px 24px rgba(0,0,0,.5);
  color-scheme: dark;
}
html.dark body::before { background-image: radial-gradient(circle at 15% 8%, rgba(255,143,171,.10) 0, transparent 34%), radial-gradient(circle at 88% 92%, rgba(127,184,230,.09) 0, transparent 34%); }
/* 못 누르는 버튼: 밝은 분홍 회색 덩어리가 어두운 화면에서 혼자 튀었다 */
html.dark .btn:disabled { background: var(--tint); color: #8C8299; box-shadow: 0 6px 0 #18171D; }
html.dark .turn-banner.mine { background: var(--pink-soft); color: #FFB3C8; box-shadow: inset 0 0 0 1.5px rgba(255,143,171,.45); }
html.dark .invite { background: linear-gradient(135deg, #402232, #1A2A3E); }
html.dark .resume-card { background: linear-gradient(135deg, #243A4C, #402232); }
html.dark .premium-card { background: linear-gradient(135deg, #3A2F18, #402232); }
html.dark .rummi { background: linear-gradient(135deg, #1B1A20, #18171C 45%, #1E2530); }
html.dark .mines-grid .cell.open { background: #2E2C35; }
html.dark .mines-grid .cell.open.o-pink { background: #3A2A33; }
html.dark .mines-grid .cell.open.o-blue { background: #2E3A46; }
html.dark .mines-grid .cell.mine { background: #4A2A2A; }
html.dark .mines-grid .cell.wrong { background: #34313A; }
html.dark .sd-cell.peer { background: #3A2A33; }
html.dark .sd-cell.same { background: #402232; }
html.dark .sd-cell.wrong { background: #4A2A2A; }
html.dark .sd-grid { background: #6E6878; border-color: #6E6878; }
html.dark .sd-box { background: #37343F; }
html.dark .bs-grid .c { background: #2A3A48; }
html.dark .bs-grid .c.miss { background: #33475A; }
html.dark .bs-grid .c.reveal { background: #403D47; }
html.dark .toast { background: #F4E9EE; color: #1F1E25; }
html.dark table.score th, html.dark table.score td { border-bottom-color: var(--line); }
html.dark table.score tr.sub th, html.dark table.score tr.sub td { background: var(--tint); }
html.dark .stone.s2 { background: radial-gradient(circle at 35% 35%, #fff, #D9CBB6); }
html.dark input.input, html.dark textarea { background: var(--tint); color: var(--text); border-color: var(--line); }
html.dark .ibadge { box-shadow: 0 0 0 2px var(--card); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
/* 아이폰 사파리는 "이 글자 너무 작네" 싶으면 혼자 키운다. 가로로 넓은 한 줄짜리 작은 글자를
   특히 잘 건드리는데(받침대 안내 글·배지·이름표), 그러면 칸에 맞춰 둔 글자가 칸 밖으로 나간다.
   손가락으로 벌리는 확대와 기기 글자 크기 설정은 그대로 산다 — 사파리가 멋대로 키우는 것만 끈다. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { scroll-padding-bottom: 96px; }   /* 아래 고정된 시작 버튼 띠 뒤로 스크롤해 숨지 않게 */
html { overscroll-behavior-x: none; overscroll-behavior-y: none; }   /* 크롬은 뒤로 가기·당겨서 새로고침을 html 쪽 값으로 본다 (body 만으론 안 막혔다 — 갤럭시 홈 화면 앱에서 화면을 내리면 새로고침돼 판이 끊겼다). 새로고침은 하트 메뉴에 있다 */
/* 두 번 톡 쳐도 확대되지 않게 — 이 앱은 "두 번 눌러 확정"이 많아서 확대가 끼어들면 방해만 된다.
   스크롤·핀치 확대는 그대로다. iOS 는 viewport 의 user-scalable=no 를 무시하므로 이쪽으로 막는다.
   드래그하는 판·타일은 각자 touch-action: none / pan-y 로 더 좁게 잡는다 */
html, body { touch-action: manipulation; }
* { touch-action: manipulation; }   /* touch-action 은 물려받지 않는다 — 사파리가 누른 요소 자체를 보는 경우가 있어 모두에 (클래스로 준 none·pan-y 가 이긴다) */
/* 한글은 단어 중간에서 끊기면 읽기 나쁘다("확/정", "클리/어") → 띄어쓰기에서만 줄을 바꾼다.
   칸보다 긴 단어는 어쩔 수 없이 끊는다(넘쳐서 잘리는 것보단 낫다).
   text-wrap: pretty — 마지막 줄에 한 덩어리만 뚝 떨어지면 앞 줄에서 한 덩어리를 내려 보낸다.
   못 알아듣는 브라우저는 그냥 무시한다(지금과 같아질 뿐 깨지지 않는다). 사파리 17.5·크롬 117부터 */
body { word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }
/* 짧은 제목은 두 줄 길이를 고르게 맞추는 쪽이 낫다 */
.dlg h2, .result h2, .result .title, .home h1, .home .tag, .rotate-hint h2, .rm-rotate h2 { text-wrap: balance; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;   /* 판·설명서를 옆으로 세게 밀다가 브라우저 "뒤로 가기" 손짓이 걸려 방을 나가지 않게 */
  -webkit-font-smoothing: antialiased;
  /* 꾹 눌러도 글자가 선택되거나 iOS 팝업(복사·공유)이 뜨지 않게 — 게임에서 방해만 된다 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 15% 10%, #FFE3EC 0, transparent 30%), radial-gradient(circle at 85% 90%, #E4F1FB 0, transparent 30%); }
/* 글을 쓰는 곳만 선택·복사 가능 */
input, textarea, [contenteditable] { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
/* 공유 카드 그림만은 길게 눌러 저장할 수 있게 (아이폰·카톡 안 브라우저는 저장 버튼이 안 먹는 경우가 있다) */
#share-img { -webkit-touch-callout: default; user-select: auto; -webkit-user-select: auto; }
/* 그림을 길게 눌러 끌고 가는 것도 막는다 (기물·타일) */
img { -webkit-user-drag: none; user-drag: none; }
button, input { font-family: inherit; font-size: 1rem; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
input { user-select: text; }
[hidden] { display: none !important; }
#app, #tut .tut-app { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; padding-top: var(--safe-top); }

/* ── 공통 요소 ── */
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 999px; font-family: var(--font-display); font-size: 1.1rem;
  background: var(--pink); color: #fff; box-shadow: 0 6px 0 var(--pink-dark);
  transition: transform .08s, box-shadow .08s; min-height: 52px;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--pink-dark); }
.btn:disabled { background: #E9DDE2; color: #B9AAB1; box-shadow: 0 6px 0 #D5C7CD; cursor: not-allowed; }
.btn.blue { background: var(--blue); box-shadow: 0 6px 0 var(--blue-dark); }
.btn.blue:active { box-shadow: 0 2px 0 var(--blue-dark); }
.btn.ghost { background: var(--card); color: var(--pink-dark); box-shadow: 0 6px 0 var(--line); }
/* 분홍 버튼 위에선 아이콘의 분홍 부분이 배경에 묻힌다(하트 두 개 중 하나가 사라져 보임) → 흰 테두리로 띄운다 */
.btn:not(.ghost) .uicon, .btn:not(.ghost) .gicon { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.btn.ghost:active { box-shadow: 0 2px 0 var(--line); }
.btn.sm { padding: 8px 14px; min-height: 36px; font-size: .95rem; box-shadow: 0 3px 0 var(--pink-dark); }
.btn.sm.ghost { box-shadow: 0 3px 0 var(--line); }
.btn.sm:active { transform: translateY(2px); box-shadow: 0 1px 0 currentColor; }
.btn.block { width: 100%; }
.input {
  width: 100%; padding: 14px 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--card);
  font-size: 1.05rem; outline: none; text-align: center;
}
.input:focus { border-color: var(--pink); }
.muted { color: var(--muted); font-size: .9rem; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--pink-soft); color: var(--pink-dark); font-size: .85rem; font-family: var(--font-display); }
.chip.blue { background: var(--blue-soft); color: var(--blue-dark); }
.chip.mint { background: var(--mint-soft); color: var(--mint-dark); }
.chip.yellow { background: var(--yellow-soft); color: var(--amber-text); }
.row { display: flex; gap: 10px; align-items: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* ── 홈 ── */
.home { padding: 28px 20px 40px; display: flex; flex-direction: column; gap: 18px; flex: 1; justify-content: center; }
.logo { width: 120px; height: 120px; margin: 0 auto; display: block; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.home h1 { font-size: 2.4rem; margin: 6px 0 0; text-align: center; color: var(--pink-dark); }
.home .tag { text-align: center; color: var(--muted); margin: 0; line-height: 1.5; }
.home-notice { margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--yellow-soft); color: var(--amber-text); text-align: center; font-size: .92rem; line-height: 1.45; }
/* 게임 중 상대 연결이 끊겨 있을 때 판 위에 떠 있는 줄 */
.partner-off { margin: 0 14px 6px; padding: 7px 12px; border-radius: 12px; background: var(--yellow-soft); color: var(--amber-text); text-align: center; font-size: .85rem; }
/* 처음 하는 게임의 규칙 한 줄 — 판 위에 작게, 누르면 닫힘 (전엔 가운데 큰 알림이 판을 덮었다) */
.first-tip { display: flex; align-items: center; gap: 8px; margin: 0 14px 6px; padding: 7px 8px 7px 12px; min-height: 36px; border: 0; border-radius: 12px; background: var(--blue-soft); color: var(--text); font: inherit; font-size: .82rem; line-height: 1.4; text-align: left; box-shadow: 0 2px 8px rgba(0,0,0,.05); animation: pill-in .2s ease-out; cursor: pointer; }
.first-tip .uicon { width: 18px; height: 18px; flex: none; }
.first-tip span { flex: 1; min-width: 0; }
.first-tip b { font-family: var(--font-display); font-weight: normal; color: var(--blue-dark); }
.first-tip .x { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--muted); }
.first-tip .x .close-ic { width: 14px; height: 14px; }
/* 대기실 게임 거르기 알약 — 한 줄 가로 스크롤 (작은 폰에서도 줄이 안 불어나게) */
.game-filter { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: 0 -2px; -webkit-overflow-scrolling: touch; }
.game-filter::-webkit-scrollbar { display: none; }
.game-filter .gf { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--card); color: var(--muted); font-family: var(--font-display); font-size: .9rem; box-shadow: 0 2px 8px rgba(0,0,0,.05); white-space: nowrap; }
.game-filter .gf.on { background: var(--pink); color: #fff; box-shadow: 0 3px 0 var(--pink-dark); }
@media (max-width: 380px) { .game-filter { gap: 4px; } .game-filter .gf { flex: 1 0 auto; padding: 0 8px; font-size: .84rem; } }   /* 좁은 폰에서도 알약 6개가 한 줄에 */
.game-card .gc-first { position: absolute; top: -8px; right: 10px; padding: 2px 8px; border-radius: 999px; background: var(--yellow); color: #6B4E00; font-style: normal; font-family: var(--font-display); font-size: .75rem; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.game-card.has-first { padding-top: 16px; }   /* 표시가 두 줄 이름(숫자 올리기)을 덮었다 — 그만큼 안쪽을 내린다 */
/* 설정 창 — 하트 메뉴의 "설정" */
.settings-back { display: flex; align-items: center; justify-content: center; padding: 20px; }
.dlg.settings { text-align: left; display: flex; flex-direction: column; gap: 8px; }
.dlg.settings .rec-head { margin-bottom: 4px; }
.set-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-radius: 14px; background: var(--tint); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.set-row:active { transform: scale(.98); }
.set-row .uicon { width: 24px; height: 24px; flex: none; }
.set-row .nm { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 1rem; display: flex; flex-direction: column; }
.set-row .nm small { font-family: var(--font-body); font-size: .75rem; color: var(--muted); line-height: 1.3; }
.set-row b { flex: none; font-weight: normal; font-size: .85rem; padding: 4px 10px; border-radius: 999px; background: var(--card); color: var(--muted); }
.set-row b.on { background: var(--pink-soft); color: var(--pink-dark); }
/* 소리 크기 밀대 두 줄 — 앞 아이콘은 켜고 끄기, 밀대는 0(꺼짐)~100 */
.set-vols { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 6px 4px; border-radius: 14px; background: var(--tint); }
.set-vol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 48px; }   /* 좁으면(작은 폰·큰 글씨) 밀대와 숫자가 다음 줄로 */
.set-vol .sv-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; padding: 0; background: none; border-radius: 12px; cursor: pointer; }
.set-vol .sv-ic:active { transform: scale(.9); }
.set-vol .sv-ic .uicon { width: 24px; height: 24px; }
.set-vol .sv-nm { flex: none; width: 3.4em; font-family: var(--font-display); font-size: 1rem; }
.set-vol b { flex: none; min-width: 3.2em; text-align: center; font-weight: normal; font-size: .85rem; padding: 4px 6px; border-radius: 999px; background: var(--card); color: var(--muted); font-variant-numeric: tabular-nums; }
.set-vol b.on { background: var(--pink-soft); color: var(--pink-dark); }
.set-vol input[type=range] { flex: 1 1 110px; min-width: 0; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.set-vol input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--pink) var(--p), var(--line) var(--p)); }
.set-vol input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--pink) var(--p), var(--line) var(--p)); }
.set-vol input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.set-vol input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.set-vol input[type=range]:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 8px; }
.set-vols .sv-note { padding: 0 0 2px 52px; font-size: .75rem; color: var(--muted); line-height: 1.3; }
/* 설정 맨 아래 — 문의·약관·버전. 한 줄에 안 들어가면 그대로 다음 줄로 (· 로 잇지 않고 칸 사이를 띄운다) */
.set-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; margin-top: 6px; font-size: .8rem; color: var(--muted); }
.set-foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; padding: 8px 2px; }
.set-foot span { padding: 8px 2px; }
.set-foot span:empty { display: none; }
/* 첫 화면 게임 맛보기 — 아이콘만. 여덟씩 두 줄(15개 = 8 + 7). 게임이 17개를 넘으면 칸 수를 다시 본다 */
.home .games-preview { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: 5px;   /* 게임 수가 늘어도 늘 두 줄 (전엔 8칸 고정이라 23개면 세 줄) */ }
.home .games-preview .gp { display: grid; place-items: center; aspect-ratio: 1; background: var(--card); border: 0; padding: 0; border-radius: 9px; box-shadow: 0 3px 10px rgba(0,0,0,.05); min-width: 0; cursor: pointer; }
.home .games-preview .gp:active, .home .games-preview .gp.on { transform: scale(.94); box-shadow: 0 0 0 2px var(--pink); }
.home .games-preview .gicon { width: 80%; height: 80%; }
#gp-tip { position: fixed; z-index: 60; pointer-events: none; padding: 6px 12px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: .9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.18); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
#gp-tip.below { transform: translateY(-4px); }
#gp-tip.show { opacity: 1; transform: none; }
#gp-tip::after { content: ''; position: absolute; left: var(--ax, 50%); top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--text); }
#gp-tip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--text); }
.home .games-count { margin: 8px 0 0; text-align: center; font-size: .85rem; color: var(--muted); }
.home .or { text-align: center; color: var(--muted); font-size: .85rem; }
.join-row { display: flex; gap: 8px; }
.join-row .btn { white-space: nowrap; flex-shrink: 0; }
#code.was { color: var(--muted); letter-spacing: .12em; }   /* 방금 있던 방 코드 — 흐리게 남겨 두고, 누르면 통째로 골라져 새로 칠 수 있게 */
.rejoin-hint { margin: 6px 0 0; text-align: center; font-size: .82rem; color: var(--pink-dark); }
.join-row .input { text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-display); }
.home footer { text-align: center; font-size: .75rem; color: var(--muted); margin-top: auto; padding-top: 20px; }

/* ── 방 화면 ── */
.room { display: flex; flex-direction: column; min-height: 100dvh; }
.topbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.topbar .brand { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); color: var(--pink-dark); font-size: 1.1rem; }
.topbar .brand svg { width: 28px; height: 28px; }
@media (max-width: 480px) { .topbar .brand { display: none; } }
@media (max-width: 360px) { .topbar { gap: 6px; padding: 8px 10px; } .topbar .code { letter-spacing: .06em; padding: 6px 9px; } }
@media (max-width: 340px) { .topbar .iconbtn { width: 38px; height: 38px; } }
.topbar .code { margin-left: auto; white-space: nowrap; font-family: var(--font-display); letter-spacing: .12em; background: var(--card); border-radius: 999px; padding: 6px 12px; min-height: 36px; box-shadow: 0 3px 10px rgba(0,0,0,.05); font-size: .95rem; }
.iconbtn { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--card); box-shadow: 0 3px 10px rgba(0,0,0,.06); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; position: relative; }
.iconbtn .badge { position: absolute; top: -4px; right: -4px; background: var(--red); color: #fff; font-size: .7rem; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-family: var(--font-display); }

.players { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 14px 10px; }
.avatar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 84px; }
.avatar .face { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--card); box-shadow: 0 4px 12px rgba(0,0,0,.08); border: 3px solid var(--line); position: relative; }
.avatar.c-pink .face { border-color: var(--pink); background: var(--pink-soft); }
.avatar.c-blue .face { border-color: var(--blue); background: var(--blue-soft); }
.avatar .name { font-size: .85rem; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); }
.avatar .dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--green); border: 2px solid #fff; }
.avatar.off .dot { background: #C9BFC4; }
.avatar.off .face { filter: grayscale(1); opacity: .5; }
.avatar.off .name { color: var(--muted); }
.avatar.empty .face { border-style: dashed; color: var(--muted); font-size: 1.1rem; background: transparent; }
.avatar.empty .face { animation: wait-pulse 2.4s ease-in-out infinite; }
@keyframes wait-pulse { 0%, 100% { border-color: var(--line); } 50% { border-color: var(--pink); } }
@media (prefers-reduced-motion: reduce) { .avatar.empty .face { animation: none; } }
.avatar .wait-hint { font-size: .75rem; line-height: 1.3; color: var(--muted); text-align: center; margin-top: 1px; }
/* "두는 중 ●●●" — 상대가 판을 만지는 동안만. 자리를 밀지 않게 아바타 위에 겹쳐 띄운다 */
.thinking { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 3px;
  background: var(--card); border-radius: 999px; padding: 4px 10px; font-size: .72rem; color: var(--muted); white-space: nowrap;
  box-shadow: var(--shadow); z-index: 3; animation: pop .2s ease-out; }
.thinking i { width: 4px; height: 4px; border-radius: 50%; background: var(--pink); display: block; animation: think 1.1s infinite; }
.thinking i:nth-of-type(2) { animation-delay: .18s; }
.thinking i:nth-of-type(3) { animation-delay: .36s; }
@keyframes think { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* 게임 중엔 프로필 바로 아래에 — 안내 줄 아래 빈 자리(92px)에 띄우니 게임마다 점수 줄을 가렸다(조각보) */
.room.in-game .thinking { top: calc(100% + 4px); padding: 2px 8px; }
@media (prefers-reduced-motion: reduce) { .thinking i { animation: none; opacity: .7; } }

.avatar .bubble { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); background: var(--card); border-radius: 14px; padding: 6px 10px; font-size: .8rem; box-shadow: var(--shadow); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; animation: pop .2s ease-out; z-index: 3; }
.avatar .bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: var(--card); transform: translateX(-50%) rotate(45deg); }
.players .heart { font-size: 1.4rem; animation: beat 1.4s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.25); } 40% { transform: scale(1); } }
@keyframes pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

.stage { flex: 1; padding: 6px 14px calc(90px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 14px; }

/* 게임 중: 윗줄(나가기·채팅)과 두 사람을 한 줄에. 방 코드·공유·기록은 대기실에서만 */
.room { position: relative; }
.room.in-game .topbar { padding: 8px 14px; min-height: 56px; }
.room.in-game .topbar .brand, .room.in-game .topbar .code, .room.in-game #btn-share, .room.in-game #btn-records { display: none; }
.room.in-game #fab-chat { margin-left: auto; }
.room.in-game .players { position: absolute; top: 8px; left: 64px; right: 64px; height: 40px; padding: 0; gap: 6px; }
.room.in-game .avatar { flex-direction: row; min-width: 0; gap: 6px; flex: 0 1 auto; }
.room.in-game .avatar:last-child { flex-direction: row-reverse; }
.room.in-game .avatar .face { width: 36px; height: 36px; border-width: 2px; flex-shrink: 0; box-shadow: none; }
.room.in-game .avatar .name { font-size: .85rem; max-width: 96px; min-width: 0; }
.room.in-game .players .heart .uicon { width: 22px; height: 22px; }
.room.in-game .players .heart { flex-shrink: 0; margin: 0 3px; }
.room.in-game .avatar .bubble { top: 44px; }
.room.in-game .avatar .bubble::after { top: -5px; bottom: auto; }
.room.in-game .stage { padding-top: 2px; gap: 10px; }
/* 아래 바(시작·끝 버튼)가 비어 있으면 그 자리를 비워 두지 않는다 — 게임이 한 화면에 들어오게 */
.room.in-game.bar-empty .stage { padding-bottom: calc(12px + var(--safe-bottom)); }
@media (max-width: 360px) { .room.in-game .players { left: 58px; right: 58px; gap: 4px; } .room.in-game .avatar .name { max-width: 64px; font-size: .8rem; } .room.in-game .topbar { padding: 8px 10px; } }

/* 로비 */
.invite { background: linear-gradient(135deg, #FFE1EA, #E1F0FB); border-radius: var(--radius); padding: 18px; text-align: center; }
.invite h3 { margin: 0 0 6px; font-size: 1.3rem; }
.invite .row { margin-top: 14px; }   /* 주소 상자를 뺀 자리 — 안내 글과 버튼 사이를 띄운다 */
/* 멈춰 둔 판 이어하기 카드 */
.resume-card { border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); }
.resume-card .big { font-size: 2rem; }
/* 멈춰 둔 판 이어하기 카드 */
.resume-card { background: linear-gradient(135deg, #E7F3FF, #FFE1EA); }
.resume-card .gicon.xl { width: 44px; height: 44px; }
.resume-card .chip { background: var(--pink); color: #fff; }
.resume-card h3 { margin: 0; font-size: 1.1rem; }
.resume-card p { margin: 2px 0 0; font-size: .82rem; color: var(--muted); }
/* 게임 고르기: 요즘 한 게임 · 협동 · 대전 세 묶음. 카드는 눕혀서 [그림] 이름 한 줄 */
.games-pick { display: flex; flex-direction: column; gap: 14px; }
.games-sec { display: flex; flex-direction: column; gap: 8px; }
.games-sec h4 { margin: 0 4px; font-family: var(--font-display); font-weight: 400; font-size: .95rem; color: var(--text); display: flex; align-items: baseline; gap: 6px; }
.games-sec h4 span { font-family: var(--font-body); font-size: .8rem; color: var(--muted); }
.games-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.game-card { display: flex; align-items: center; gap: 10px; min-height: 62px; background: var(--card); border-radius: 18px; padding: 8px 12px 8px 10px; text-align: left; box-shadow: 0 4px 14px rgba(0,0,0,.05); border: 3px solid transparent; transition: transform .1s; position: relative; }
.game-card:active { transform: scale(.97); }
.game-card.selected { border-color: var(--pink); background: var(--tint); }
.game-card .gicon { width: 40px; height: 40px; flex: none; }
.game-card .name { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; min-width: 0; overflow-wrap: normal; }   /* 낱말 가운데서 안 끊고, 길면 app.js fitGameNames 가 글자를 줄인다 */
/* 요즘 한 게임: 세 칸, 그림을 위로 크게 */
.games-recent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.game-card.recent { flex-direction: column; justify-content: center; gap: 2px; padding: 10px 6px 8px; text-align: center; border-color: var(--pink-soft); }
.game-card.recent.selected { border-color: var(--pink); }
.game-card.recent .gicon { width: 46px; height: 46px; }
.game-card.recent .name { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.game-card.recent small { font-size: .72rem; color: var(--muted); }
/* 카드엔 그림과 이름만 — 설명은 고르면 아래 한 줄로 (목록이 화면 두 배 넘게 길어졌었다) */
.pick-info { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 16px; padding: 8px 10px 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.05); font-size: .84rem; }
.pick-info .grow { flex: 1; min-width: 0; line-height: 1.35; color: var(--text); }
.pick-info .gicon.sm { width: 24px; height: 24px; flex: none; }
.pick-info .btn.sm { flex: none; white-space: nowrap; }
.options { display: flex; flex-direction: column; gap: 8px; }
.options .label { font-size: .85rem; color: var(--muted); }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { padding: 8px 14px; border-radius: 999px; background: var(--card); border: 2px solid var(--line); font-size: .9rem; }
.pill.on { border-color: var(--pink); background: var(--pink-soft); color: var(--pink-dark); font-family: var(--font-display); }
.startbar { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(12px + var(--safe-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); display: flex; gap: 10px; justify-content: center; z-index: 5; pointer-events: none; }
.startbar > * { pointer-events: auto; }
.startbar { flex-wrap: wrap; }
.sb-pick { flex: 1 0 100%; max-width: 452px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; border: 0; background: var(--card); color: var(--text); border-radius: 14px; padding: 7px 12px; font: inherit; font-size: .84rem; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.sb-pick b { font-family: var(--font-display); font-weight: 400; color: var(--pink-dark); }
.sb-opt { padding: 1px 8px; border-radius: 999px; background: var(--tint); color: var(--muted); white-space: nowrap; }
/* 고를 게임이 없어 비활성일 때는 탭을 먹지 않는다 — 바 뒤에 있는 게임 카드가 안 눌리면 안 된다 */
.startbar .btn:disabled { pointer-events: none; }
.startbar .btn { flex: 1; max-width: 452px; }
.startbar.endbar .btn.ghost { flex: 0 0 auto; padding-left: 14px; padding-right: 14px; }
/* 끝난 판 바: 글자가 접혀 버튼이 커다란 원이 되어 판을 덮지 않게 한 줄로 */
.startbar.endbar .btn { white-space: nowrap; min-width: 0; }
/* 제일 중요한 "한 판 더" 는 찌그러지지 않는다. 자리가 모자라면(좁은 폰 + 큰 글자) 나머지가 다음 줄로 내려간다 */
.startbar.endbar { flex-wrap: wrap; }
.startbar.endbar .btn:not(.ghost) { flex: 1 0 auto; }
@media (max-width: 400px) {
  .startbar.endbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .startbar.endbar .btn { min-height: 46px; padding: 10px 14px; font-size: 1rem; gap: 6px; }
  .startbar.endbar .btn.ghost { padding-left: 11px; padding-right: 11px; }
}
.card.attention { animation: attention 1.6s ease-out; }
@keyframes attention { 0% { box-shadow: 0 0 0 0 rgba(240,106,147,.55); } 60% { box-shadow: 0 0 0 10px rgba(240,106,147,0); } 100% { box-shadow: var(--shadow); } }

/* 게임 공통 */
.game-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.game-head .title { font-family: var(--font-display); font-size: 1.2rem; }
.turn-banner { text-align: center; padding: 10px; border-radius: var(--radius-sm); background: var(--card); font-family: var(--font-display); font-size: 1.05rem; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,.05); }   /* 줄 높이 고정: 글꼴에 없는 ·—… 가 섞이면 칸이 4px 커져 차례마다 화면이 들썩였다 */
.turn-banner.mine { background: var(--pink-soft); color: var(--pink-dark); }
.board-wrap { position: relative; touch-action: manipulation; }
.cursor-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.partner-cursor { position: absolute; width: 22px; height: 22px; transform: translate(-30%, -30%); transition: left .08s linear, top .08s linear; filter: drop-shadow(0 0 2px rgba(0,0,0,.28)); z-index: 4; } /* 그림자를 사방으로 고르게: 아래로만 지면 테두리가 내려가 보임 */
.partner-cursor .tag { position: absolute; left: 18px; top: 16px; font-size: .7rem; background: var(--card); border-radius: 8px; padding: 2px 6px; white-space: nowrap; font-family: var(--font-display); }

/* 결과 오버레이 */
.overlay { position: fixed; inset: 0; background: rgba(74, 59, 68, .45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 20; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.result { background: var(--card); border-radius: 28px; padding: 26px 22px; width: 100%; max-width: 360px; text-align: center; animation: pop2 .25s ease-out; }
@keyframes pop2 { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.result .big { font-size: 3.2rem; line-height: 1; }
.result h2 { margin: 10px 0 4px; font-size: 1.7rem; color: var(--pink-dark); }
.result h2 .who { display: inline-block; white-space: nowrap; }   /* 이름은 한 덩어리 — 길면 제목 글자를 줄인다(app.js) */
.result .summary { color: var(--muted); margin: 0 0 6px; }
.result .count { font-size: .8rem; color: var(--muted); }
.result .actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
/* 결과 창 아래 그림 한 줄 — 공유 · 내기 · 다시 보기 · 다른 게임 */
.result-tools { display: flex; justify-content: center; gap: 4px; }
.rtool { flex: 1 1 0; min-width: 0; max-width: 84px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 4px 0; color: var(--muted); font-family: var(--font-body); font-size: .76rem; white-space: normal; word-break: keep-all; text-align: center; line-height: 1.2; cursor: pointer; }   /* 글자를 키우면 "다시 보기다른 게임" 처럼 이웃과 붙었다 — 낱말째 줄바꿈 */
.rtool .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--card); box-shadow: 0 3px 0 var(--line), 0 2px 10px rgba(0,0,0,.05); transition: transform .08s; }
.rtool .ic .uicon { width: 24px; height: 24px; }
.rtool:active .ic { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }

/* 규칙 보기 */
.rules-box { text-align: left; max-width: 420px; max-height: 80dvh; overflow-y: auto; }
/* 제목줄(닫기 ✕)은 스크롤해도 위에 붙어 있다 — 긴 규칙(도망자 스킬표)을 끝까지 내려도 닫을 수 있게.
   .result 의 윗 여백(26px)만큼 끌어올려 붙이고, 그 자리를 제 배경으로 덮는다 */
.rules-box .rec-head { display: flex; align-items: center; gap: 8px; margin: -26px -22px 6px; padding: 26px 22px 8px; position: sticky; top: -26px; background: var(--card); z-index: 1; }
.rules-box .rec-head h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 6px; }
.rules-box .rec-head .iconbtn { margin-left: auto; }
/* 설명서가 있는 게임은 장을 옆으로 넘긴다 — 창 높이는 고정, 긴 장은 그 장 안에서만 위아래로 */
.rules-box.paged { display: flex; flex-direction: column; max-height: min(80dvh, 640px); overflow: hidden; padding-bottom: 16px; }   /* 높이는 가장 긴 장에 맞춘다(장들이 한 줄이라 줄 높이 = 가장 긴 장) — 짧은 게임은 창도 작게 */
.rules-box.paged .rec-head { position: static; margin: 0 0 8px; padding: 0; }
.rules-box.paged .guide { flex: 0 1 auto; min-height: 0; gap: 10px; }
.g-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: none; }
.g-tabs::-webkit-scrollbar { display: none; }
.g-tab { flex: 1 0 auto; min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--tint); color: var(--muted); font-family: var(--font-display); font-size: .84rem; white-space: nowrap; }
.g-tab.on { background: var(--pink); color: #fff; }
.g-track { flex: 0 1 auto; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: none; -webkit-overflow-scrolling: touch; }   /* contain 이면 첫 장에서 오른쪽으로 세게 밀 때 크롬 "뒤로 가기" 손짓이 걸렸다 */
.g-track::-webkit-scrollbar { display: none; }
.g-page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; overscroll-behavior-y: contain; display: flex; flex-direction: column; gap: 12px; padding: 2px 2px 8px; box-sizing: border-box; }
.g-page.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent); mask-image: linear-gradient(#000 calc(100% - 36px), transparent); }   /* 아래로 더 있으면 끝을 흐리게 — 장 안에서 내려 볼 게 있다는 표시 */
.g-nav { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-nav .btn { min-width: 84px; }
.g-nav .btn:disabled { visibility: hidden; }
.g-count { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-goal { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; background: var(--yellow-soft); border-radius: 14px; padding: 10px 12px; }
.g-goal .g-ic { background: var(--card); }
.g-goal h3 { margin: 0; font-size: .82rem; color: var(--amber-text); }
.g-goal p { margin: 0; font-family: var(--font-display); font-size: 1rem; line-height: 1.45; }
.guide .g-h { margin: 2px 0 0; }
.g-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.g-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; background: var(--tint); border-radius: 14px; padding: 10px 12px; }
.g-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pink); color: #fff; font-style: normal; font-family: var(--font-display); font-size: .95rem; line-height: 1; }
.g-steps li span { padding-top: 3px; }
.g-ends { display: flex; flex-direction: column; gap: 6px; }
.g-endc { display: flex; gap: 10px; align-items: baseline; border-radius: 12px; padding: 8px 12px; background: var(--tint); }
.g-endc b { flex: none; font-family: var(--font-display); font-weight: 400; min-width: 2.2em; }
.g-endc.win { background: var(--mint-soft, #DDF3E7); } .g-endc.win b { color: var(--mint-dark); }
.g-endc.lose { background: var(--pink-soft); } .g-endc.lose b { color: var(--red); }
.g-endc.draw b, .g-endc.end b { color: var(--muted); }
.rules-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: .92rem; line-height: 1.5; text-align: left; }
.rules-list li::marker { color: var(--pink-dark); font-family: var(--font-display); }
/* 규칙 아래 참고표 (도망자 스킬 카드처럼 순서 없는 것) — 번호 없이, 항목마다 옅은 칸 */
.rules-ref-title { font-family: var(--font-display); font-weight: normal; font-size: 1rem; margin: 16px 0 8px; color: var(--pink-dark); }
.rules-ref { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; line-height: 1.5; text-align: left; }
.rules-ref li { background: var(--tint); border-radius: 12px; padding: 8px 10px; }
.rules-ref .rr-role { font-style: normal; font-size: .75rem; padding: 0 6px; border-radius: 999px; white-space: nowrap; background: var(--yellow-soft); color: var(--amber-text); }
.rules-ref .rr-role.f { background: var(--pink-soft); color: var(--pink-dark); }
.rules-ref .rr-role.m { background: var(--blue-soft); color: var(--blue-dark); }

/* 떠다니는 하트 버튼 — 평소엔 가장자리에 반쯤 걸쳐 숨고, 누르면 안으로 들어오며 세로로 펼쳐진다 */
.heart-fab { position: fixed; left: 0; top: 0; z-index: 13; width: 46px; height: 46px; border-radius: 50%; background: var(--card); border: 0; padding: 0;
  display: grid; place-items: center; box-shadow: 0 4px 16px rgba(74,59,68,.22); opacity: .72; touch-action: none; cursor: grab; pointer-events: none;
  will-change: transform; transition: opacity .15s, transform .18s ease; }
.heart-fab .uicon { width: 28px; height: 28px; pointer-events: none; }
/* 절반 걸쳐 있을 때는 화면 여백(14px) 밖으로 나온 부분만 눌린다 — 콘텐츠를 덮어도 탭을 뺏지 않는다.
   (버튼 자체는 pointer-events: none, 눌리는 건 이 영역뿐) */
.heart-fab::after { content: ''; position: absolute; inset: -8px -8px -8px 9px; pointer-events: auto; }
.heart-fab.on, .heart-fab.dragging { pointer-events: auto; }
.heart-fab.on::after, .heart-fab.dragging::after { inset: -8px; }
.heart-fab.on { opacity: 1; }
.heart-fab.dragging { transition: none; opacity: 1; cursor: grabbing; }
.heart-back { position: fixed; inset: 0; z-index: 12; background: rgba(40,30,36,.42); animation: fade .15s; }   /* 메뉴 이름표가 뒤 글자(차례 안내 등)와 겹쳐 읽혀서 뒤를 어둡게 */
.heart-back[hidden] { display: none; }
.heart-menu { position: fixed; z-index: 13; display: flex; flex-direction: column; gap: 9px; }
.heart-menu[hidden] { display: none; }
.heart-menu.up { flex-direction: column-reverse; }
.heart-menu.left-label { align-items: flex-end; }   /* 하트가 오른쪽에만 붙으므로 이름표는 늘 왼쪽 */
.heart-menu .hm { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; }
.hm-label { background: var(--card); color: var(--text); font-size: .74rem; font-family: var(--font-display);
  padding: 4px 9px; border-radius: 999px; box-shadow: 0 3px 12px rgba(74,59,68,.16); white-space: nowrap; }
.hm-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--card); display: grid; place-items: center; flex: none; box-shadow: 0 4px 16px rgba(74,59,68,.22); }
.hm-ic .uicon { width: 20px; height: 20px; }
/* 기권은 빨간 이름표 — 다른 것들과 한눈에 구별되게 (판 아래 버튼을 없애고 여기로 옮겼다) */
.heart-menu .hm.danger .hm-label { color: #D9455F; }
.heart-menu .hm.danger .hm-ic { box-shadow: 0 4px 16px rgba(217,69,95,.28); }

/* 채팅 */
.chat-back { position: fixed; inset: 0; z-index: 14; background: rgba(74,59,68,.12);; touch-action: none; }
/* 채팅을 열면 뒤 화면은 멈춘다 — 대화를 올려 보다 끝에 닿으면 판까지 같이 밀려 내려갔다 (아이폰은 app.js 가 손가락 움직임도 막는다) */
html.chat-open, html.chat-open body { overflow: hidden; overscroll-behavior: none; }
/* 오른쪽에서 밀려 들어오는 서랍. 왼쪽에 판이 살짝 보여 "옆에 잠깐 연 창"으로 느껴지게 폭 80% */
.chat-sheet { position: fixed; top: 0; right: 0; bottom: 0; width: 80%; max-width: 420px; background: var(--card); border-radius: 22px 0 0 22px; box-shadow: -8px 0 28px rgba(0,0,0,.16); z-index: 15; display: flex; flex-direction: column; padding-bottom: var(--safe-bottom); animation: slide-in .22s ease-out; }
@keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.chat-sheet .head { display: flex; align-items: center; padding: 12px 16px 6px; font-family: var(--font-display); }
.chat-sheet .head .close { margin-left: auto; }
/* 서랍은 키가 커서 대화가 적으면 위가 텅 빈다 → 아래(최신)부터 쌓이게 */
.chat-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 14px; display: flex; flex-direction: column; gap: 6px; }
/* 아래부터 쌓기는 justify-content: flex-end 대신 첫 줄 위 여백으로 — flex-end 는 넘친 옛 메시지를 위로 밀어내 스크롤로 닿을 수 없었다 */
.chat-list > :first-child { margin-top: auto; }
.chat-list > * { flex: none; }
.msg { max-width: 80%; padding: 8px 12px; border-radius: 16px; font-size: .92rem; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }   /* 낱말째 줄바꿈 (break-word 는 "이 / 긴다" 처럼 낱말 가운데서 끊었다). 띄어쓰기 없는 긴 글만 아무 데서나 */
.msg.me { align-self: flex-end; background: var(--pink-soft); border-bottom-right-radius: 4px; }
.msg.other { align-self: flex-start; background: var(--blue-soft); border-bottom-left-radius: 4px; }
.msg.system { align-self: center; background: transparent; color: var(--muted); font-size: .78rem; }
.msg .who { font-size: .72rem; color: var(--muted); margin-bottom: 2px; }
.chat-input { display: flex; gap: 8px; padding: 8px 12px 12px; }
.chat-input .input { text-align: left; padding: 10px 16px; }
.emoji-row { display: flex; gap: 4px; padding: 0 12px 6px; overflow-x: auto; overscroll-behavior: contain; }
.emoji-row button { font-size: 1.3rem; padding: 4px 6px; border-radius: 10px; }
.emoji-row button:active { background: var(--pink-soft); }

/* 토스트·네트워크 */
/* ── 전용 확인 창 (브라우저 기본 팝업 대신) ──
   토스트(50)·네트워크 줄(60)보다 위, 기권·나가기를 묻는 중엔 아무것도 그 위에 안 떠야 한다 */
.dlg-back { position: fixed; inset: 0; z-index: 80; background: rgba(74, 59, 68, .45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade .18s; }
.dlg { background: var(--card); border-radius: 26px; padding: 24px 22px 20px; width: 100%; max-width: 340px; text-align: center;
  box-shadow: 0 18px 50px rgba(74, 59, 68, .3); animation: pop2 .22s ease-out; }
.dlg h2 { font-family: var(--font-display); font-size: 1.22rem; color: var(--text); margin: 0; line-height: 1.4; }
.dlg .dlg-sub { color: var(--muted); font-size: .92rem; margin: 8px 0 0; line-height: 1.55; }
.dlg .input { margin-top: 14px; text-align: center; }
.dlg-btns { display: flex; gap: 10px; margin-top: 20px; }
.dlg-btns .btn { flex: 1; min-width: 0; padding: 13px 10px; font-size: 1rem; }
/* 창 바탕이 흰색이라 흰 버튼은 그림자 테두리만 보여 모양이 깨져 보인다 → 연한 분홍 바탕으로 */
.dlg-btns .btn.ghost { background: var(--pink-soft); box-shadow: 0 6px 0 #F3D9E2; }
.dlg-btns .btn.ghost:active { box-shadow: 0 2px 0 #F3D9E2; }
.btn.danger { background: var(--red); box-shadow: 0 6px 0 #E05A5A; }
.btn.danger:active { box-shadow: 0 2px 0 #E05A5A; }
@media (max-width: 340px) { .dlg-btns .btn { font-size: .92rem; padding: 12px 8px; } }

.toast { position: fixed; left: 50%; bottom: calc(100px + var(--safe-bottom)); transform: translateX(-50%); background: #4A3B44; color: #fff; padding: 10px 18px; border-radius: 999px; font-size: .9rem; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: 90%; text-align: center; }
/* 알림·연결 끊김 띠는 게임 판(시트, z 60) 위에 — 판이 열린 채 서버가 거절하면 까닭이 판 뒤에 숨었다 */
.toast { z-index: 70; pointer-events: none; }   /* 알림은 읽기만 — 판 위에 떠 있어도 그 밑을 누를 수 있게 (힌트 뒤 알림이 칸 터치를 가로챘다) */
.netbar { z-index: 70; }
.staging-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #4A3B44; color: #FFD166; font-size: .72rem; text-align: center; padding: 3px 8px calc(3px + var(--safe-bottom)); z-index: 70; opacity: .9; pointer-events: none; }
.netbar { position: fixed; top: var(--safe-top); left: 0; right: 0; background: var(--yellow); color: var(--amber-text); text-align: center; font-size: .85rem; padding: 6px; z-index: 60; }
.netbar.maint { display: flex; flex-direction: column; align-items: center; font-family: var(--font-display); line-height: 1.4; }
.netbar.maint span { font-family: var(--font-body); font-size: .8rem; opacity: .85; }
/* 점검 공지 띠 — 첫 화면 맨 위·대기실 위. 두 줄(무엇이·무슨 뜻인지), ✕ 로 이 기기에서 닫는다 */
.notice-band { position: relative; display: flex; flex-direction: column; gap: 1px; text-align: left; background: var(--yellow-soft); color: var(--amber-text); border-radius: 14px; padding: 9px 40px 9px 14px; box-shadow: inset 0 0 0 2px var(--yellow); font-size: .86rem; line-height: 1.45; margin: 0 0 10px; width: 100%; box-sizing: border-box; }
.notice-band b { font-family: var(--font-display); font-weight: 400; font-size: .95rem; }
.notice-band .x { position: absolute; top: 4px; right: 4px; width: 34px; height: 34px; border: 0; background: none; color: var(--amber-text); display: grid; place-items: center; padding: 0; }
.notice-band .x .close-ic { width: 14px; height: 14px; }

/* 모달(닉네임) */
.modal { position: fixed; inset: 0; background: rgba(74, 59, 68, .4); display: flex; align-items: flex-end; justify-content: center; z-index: 30; }
.modal .card { width: 100%; max-width: 480px; border-radius: 28px 28px 0 0; padding: 24px 20px calc(24px + var(--safe-bottom)); }


@media (min-width: 520px) {
  #app, #tut .tut-app { box-shadow: 0 0 60px rgba(255, 143, 171, .15); background: var(--bg); }
}

/* ── 오목 ── */
.omok { display: flex; flex-direction: column; gap: 10px; }
.omok-board { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: var(--shadow); touch-action: none; }

/* ── 협동 지뢰찾기 ── */
.mines { display: flex; flex-direction: column; gap: 10px; }
.mines-head { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; }   /* 좁은 폰·큰 글자에선 두 줄로 (한 줄이면 양 끝 칩이 화면 밖으로 잘렸다) */
.mines-grid { display: grid; gap: 3px; background: var(--card); padding: 6px; border-radius: 16px; box-shadow: var(--shadow); touch-action: none; }
.mines-grid .cell { aspect-ratio: 1; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: clamp(.8rem, 3.6vw, 1.15rem); position: relative; user-select: none; }
.mines-grid .cell.closed { background: linear-gradient(#FFD9E4, #FFC2D4); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); }
.mines-grid .cell.closed.pressing { transform: scale(.92); filter: brightness(.95); }
.mines-grid .cell.flag { font-size: clamp(.7rem, 3.2vw, 1rem); }
.mines-grid .cell.flag.c-blue { background: linear-gradient(#D6E9F9, #BFDCF5); }
.mines-grid .cell.safe { background: linear-gradient(#E6F8EF, #CDEFDD); box-shadow: inset 0 -3px 0 rgba(0,0,0,.06); }
.mines-grid .cell.safe.c-blue { background: linear-gradient(#DDF1FA, #C5E4F5); }
.mines-grid .cell.safe .cell-ico { opacity: .75; }
.mines-grid .cell.open { background: var(--tint); }
.mines-grid .cell.open.o-pink { background: #FFF1F5; }
.mines-grid .cell.open.o-blue { background: #EEF6FD; }
.mines-grid .cell.mine { background: #FFE0E0; }
.mines-grid .cell.boom { background: var(--red); animation: boom .5s; }
.mines-grid .cell.wrong { background: #F3E6EA; }
.mines-grid.lost { animation: shake .5s; }
.mines-grid.won .cell.open { animation: glow 1.2s ease-in-out; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes boom { from { transform: scale(1.6); } to { transform: scale(1); } }
@keyframes glow { 0% { background: var(--tint); } 50% { background: #E0F7EC; } 100% { background: var(--tint); } }
.mines-tools { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mode-toggle { display: inline-flex; background: var(--card); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); }
.mode-toggle .opt { padding: 10px 18px; border-radius: 999px; font-family: var(--font-display); color: var(--muted); font-size: 1rem; }
.nono-mode .opt { display: inline-flex; align-items: center; gap: 4px; padding: 9px 13px; font-size: .92rem; cursor: pointer; }
.nono-mode .opt .uicon { width: 18px; height: 18px; }
.mode-toggle .opt.on { background: var(--pink); color: #fff; }
/* 지뢰찾기: 누르는 효과(모드 색), 가정 표시(점선·물음표), 힌트 범위, 내·상대 커서 */
.mines-tools[hidden], .mines-chip[hidden], .mines-pick[hidden] { display: none; }
.mines-grid .cell { transition: transform .06s; }
.mines-grid .cell.closed.pressing { transform: scale(.88); filter: brightness(.9); }
.mines[data-mode="flag"] .mines-grid .cell.closed.pressing { background: linear-gradient(#FFB3C8, #FF9BB6); filter: none; }
.mines[data-mode="safe"] .mines-grid .cell.closed.pressing { background: linear-gradient(#CBEFDC, #A9E4C6); filter: none; }
.mines-grid .cell.nope { animation: nope .3s; }
@keyframes nope { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.mines-grid .cell.guess { background: linear-gradient(#FFE6EE, #FFD6E2); outline: 2px dashed #E86A8C; outline-offset: -4px; }
.mines-grid .cell.gsafe { background: linear-gradient(#EEFAF3, #DDF3E7); outline-color: var(--mint-dark); }
.mines-grid .cell.guess .cell-ico { opacity: .45; width: 58%; height: 58%; }
.mines-grid .cell.guess .q { position: absolute; right: 3px; top: 1px; font-style: normal; font-family: var(--font-display); font-size: clamp(.6rem, 2.6vw, .8rem); line-height: 1; color: #E86A8C; }
.mines-grid .cell.gsafe .q { color: var(--mint-dark); }
.mines-grid .cell.picked { box-shadow: inset 0 0 0 3px #F5A800 !important; filter: brightness(1.05); }
.mines-grid.over .cell.picked { box-shadow: inset 0 0 0 3px #E5484D !important; }
.mines-grid .cell.hinted { animation: hinted 1.8s ease-out; z-index: 2; }
@keyframes hinted { 0%, 30% { box-shadow: 0 0 0 4px #FFD66B; background: #FFF3C4; } 100% { box-shadow: 0 0 0 0 rgba(255,214,107,0); } }
.mines-sub { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mines-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--card); border-radius: 999px; padding: 7px 13px; min-height: 36px; box-sizing: border-box; font-family: var(--font-display); font-size: .9rem; color: var(--muted); box-shadow: var(--shadow); }
.mines-chip b { color: var(--text, #4A3B44); }
.mines-chip .q { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px dashed currentColor; font-size: .75rem; line-height: 1; }
.mines-chip.on { background: #4A3B44; color: #fff; }
.mines-chip.on b { color: #FFD66B; }
.mines-chip:disabled { opacity: .45; }
.mines-pick { font-size: .85rem; color: var(--muted); }
.mines.guess .mode-toggle .opt.on:not([data-mode="open"]) { outline: 2px dashed #fff; outline-offset: -5px; }
.partner-cursor .ring { position: absolute; inset: -2px; border-radius: 9px; border: 3px solid var(--blue); box-shadow: 0 0 0 2px #fff; animation: pulse 1s infinite; }
.partner-cursor .ring.c-pink { border-color: var(--pink); }
.partner-cursor .ring.c-blue { border-color: var(--blue); }
.partner-cursor { transform: none; width: auto; height: auto; }
.partner-cursor .tag { left: 50%; transform: translateX(-50%); top: -20px; }
/* 내 커서(안쪽)·상대 커서(바깥), 이름표 없음 */
.partner-cursor.them .ring { inset: -3px; }
.partner-cursor.me .ring { inset: 3px; border-width: 2.5px; border-radius: 5px; box-shadow: none; animation: none; }
.partner-cursor .tag { display: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ── 야찌 ── */
.yacht { display: flex; flex-direction: column; gap: 10px; }
.dice { display: flex; justify-content: center; gap: 8px; }
.die { width: 17%; max-width: 72px; aspect-ratio: 1; position: relative; padding: 0; transition: transform .15s; }
.die svg { width: 100%; height: 100%; display: block; }
.die.held { transform: translateY(-8px); }
/* 고정 배지는 분홍 — 노랑은 이 앱에서 데일리·별 자리다 */
.die .lock { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); font-size: 11.5px; background: var(--pink); color: #fff; border-radius: 999px; padding: 1px 7px; font-family: var(--font-display); }
.dice.rolling .die:not(.held) { animation: roll .4s ease-out; }
@keyframes roll { 0% { transform: rotate(0) scale(.9); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }
table.score { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); font-size: .95rem; }
table.score th, table.score td { padding: 7px 10px; text-align: center; border-bottom: 1px solid #FBEEF2; }
table.score th:first-child { text-align: left; font-weight: normal; font-family: var(--font-display); width: 42%; }
table.score thead th, table.score tr:first-child th { background: var(--pink-soft); font-family: var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.score tr:first-child th.c-blue { background: var(--blue-soft); color: var(--blue-dark); }
table.score tr:first-child th.turn { text-decoration: underline wavy var(--pink); text-underline-offset: 4px; }
table.score td.filled { font-family: var(--font-display); }
table.score td.last { background: var(--yellow-soft); }
table.score td.preview { color: var(--pink-dark); opacity: .7; }
table.score td.preview.other { color: var(--muted); opacity: .6; }
table.score td.preview.blocked { opacity: .3; }
table.score tr.upper th, table.score tr.upper td { padding-top: 4px; padding-bottom: 4px; height: 40px; box-sizing: border-box; }   /* 짧아져도 누르는 칸이라 40px 은 지킨다 */
table.score tr.upper th { font-size: 1.05rem; }
table.score th small.hint { display: block; font-size: .75rem; color: var(--muted); font-family: inherit; font-weight: normal; line-height: 1.2; margin-top: 1px; }
table.score tr.selectable { cursor: pointer; }
table.score tr.selectable:active { background: var(--pink-soft); }
table.score tr.sub th, table.score tr.sub td { font-size: .75rem; color: var(--muted); background: #FFFBF9; }
table.score tr.sub th small { font-size: 1em; }   /* 이미 12px — small 이 한 번 더 줄여 10px 가 됐다 */
table.score tr.total th, table.score tr.total td { font-family: var(--font-display); font-size: 1.05rem; background: var(--yellow-soft); border-bottom: 0; }

/* ── 우리 기록 ── */
.records-box { position: fixed; inset: 0; background: var(--bg); z-index: 40; overflow-y: auto; padding: calc(10px + var(--safe-top)) 16px 30px; }
.records { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.rec-head { display: flex; align-items: center; justify-content: space-between; }
.rec-head h2 { margin: 0; font-size: 1.6rem; color: var(--pink-dark); }
.records h3 { margin: 10px 0 0; font-size: 1.1rem; }
.rec-summary { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.rec-summary .big small { font-size: .8rem; margin-left: 1px; }
/* 0 이 아닌 것만 작은 알약으로 — 협동 클리어·데일리 */
.rec-extras { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rec-extras span { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border-radius: 999px; padding: 4px 12px; font-size: .8rem; color: var(--muted); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.rec-row .best { font-size: .8rem; }   /* 최고 기록은 제 줄에 — 승패 줄 끝에 붙이면 어중간하게 넘어갔다 */
.rec-fold { border: 0; background: none; color: var(--pink-dark); font-family: var(--font-display); font-size: .95rem; padding: 10px; cursor: pointer; }
.rec-summary .stat { background: var(--card); border-radius: 16px; padding: 12px 6px; text-align: center; box-shadow: var(--shadow); }
.rec-summary .big { font-family: var(--font-display); font-size: 1.5rem; color: var(--pink-dark); }
.rec-summary .muted { font-size: .72rem; }
.rec-row { display: flex; align-items: center; gap: 10px; }
.rec-row .emoji { font-size: 1.6rem; width: 36px; text-align: center; }
.rec-row .name { font-family: var(--font-display); font-size: 1.05rem; }
.rec-row.small { font-size: .9rem; }
.rec-row.small .emoji { font-size: 1.2rem; }
.wish { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.wish input { width: 22px; height: 22px; accent-color: var(--pink); }
.wish.done > div { text-decoration: line-through; opacity: .5; }
.wish .del { color: var(--muted); padding: 10px; margin: -4px 0; }   /* 그림 16px + 여백 → 누르는 자리 36px (28px 이라 빗나가기 쉬웠다) */

/* ── 공유 카드 ── */
.share-modal { z-index: 45; }
.share-card { background: var(--card); border-radius: 28px; padding: 18px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; max-height: 92dvh; overflow-y: auto; }
.share-preview { background: var(--bg2); border-radius: 16px; padding: 8px; display: flex; justify-content: center; }
.share-preview img { max-width: 100%; max-height: 50dvh; border-radius: 10px; box-shadow: var(--shadow); }

/* ── 프리미엄 알림·광고 슬롯 ── */
.premium-card { background: linear-gradient(135deg, #FFF3D1, #FFE1EA); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.premium-card .muted { font-size: .8rem; margin-top: 2px; }
.premium-card .input { padding: 10px 14px; font-size: .95rem; }
.premium-card .btn { white-space: nowrap; flex-shrink: 0; }
.premium-card.done { text-align: center; font-family: var(--font-display); color: var(--amber-text); }
.ad-slot { min-height: 60px; border-radius: 12px; overflow: hidden; }
.home footer a { color: var(--muted); text-decoration: none; }

/* ── 스도쿠 ── */
.sudoku { display: flex; flex-direction: column; gap: 10px; }
.sd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; background: #D9BFC9; padding: 0; border-radius: 12px; box-shadow: var(--shadow); border: 4px solid #D9BFC9; overflow: hidden; }
.sd-box { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #E8D3DA; min-width: 0; }   /* 상자 안 가는 선 1px, 상자 사이 굵은 선 3px — 칸 크기가 모두 같다 */
.sd-cell { aspect-ratio: 1; background: var(--card); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: min(4.6vw, 22px); color: #F06A93; user-select: none; overflow: hidden; }
.sd-cell.given { color: var(--text); background: var(--tint); }
.sd-cell.c-blue { color: #5A9AD1; }
.sd-cell.c-pink, .sd-cell.mine { color: #F06A93; }
.sd-cell.peer { background: #FFF1F5; }
.sd-cell.same { background: #FFE1EA; }
.sd-cell.sel { background: var(--pink); color: #fff !important; }
.sd-cell.wrong { color: var(--red) !important; background: #FFE0E0; }
.sd-cell.reveal { color: var(--faint); }
.sd-grid.lost { animation: shake .5s; }
.sd-cell.undone { animation: sd-undone .6s ease-out; }   /* 되돌린 칸이 한 번 반짝 */
@keyframes sd-undone { 0% { box-shadow: inset 0 0 0 3px var(--mint); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
/* 같은 줄·상자에 같은 숫자가 두 번 — 정답을 알려 주는 게 아니라 규칙에 어긋난 것만 (아래 빨간 줄) */
.sd-cell.dup { box-shadow: inset 0 -4px 0 var(--red); }
.sd-cell.sel.dup { box-shadow: inset 0 -4px 0 #fff; }
/* 메모: 칸 안에 1~9 자리가 정해진 작은 숫자 (3×3) */
.sd-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); width: 100%; height: 100%; padding: 3px; /* 커서 테두리에 가리지 않게 안쪽으로 */ font-family: var(--font-body); font-weight: 700; font-size: min(2.5vw, 11.5px); line-height: 1; color: #8A7480; pointer-events: none; overflow: hidden; }
.sd-notes i { display: flex; align-items: center; justify-content: center; font-style: normal; }
.sd-cell.sel .sd-notes { color: #fff; }
/* 숫자판 오른쪽 끝의 도구 두 개: 메모(켜면 분홍으로 채워진다) · 확인(남은 횟수) */
.sd-pad .key.tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: .75rem; color: var(--text); background: var(--yellow-soft); box-shadow: 0 4px 0 #F2DFA8; }
.sd-pad .key.tool .uicon { width: 18px; height: 18px; }
.sd-pad .key.tool b { font-weight: 400; color: var(--pink-dark); }
.sd-pad .key.tool.on { background: var(--pink); color: #fff; box-shadow: 0 4px 0 var(--pink-dark); }
/* 메모 중은 민트로 알린다. 이 화면은 바탕도 칸 표시도 다 분홍이라,
   분홍으로 켜 두면 켜졌는지 꺼졌는지 흘깃 봐서는 모른다 */
.sd-pad #sd-memo.on { background: var(--mint); color: #fff; box-shadow: 0 4px 0 var(--mint-dark); }
.sd-pad .key.tool:disabled { opacity: .45; }
/* 메모를 켜면 숫자판도 달라 보이게 (지금 누르면 큰 숫자가 아니라 메모가 적힌다) */
/* 숫자판 뒤에 민트 판을 깔아 준다 — 엄지손가락 바로 위라 안 보고도 눈에 걸린다.
   자리는 늘 잡아 두고 색만 바뀐다 (켤 때마다 판이 들썩이지 않게) */
.sd-pad { padding: 6px; border-radius: 16px; background: transparent; transition: background .16s ease; }
.sd-pad.memo { background: var(--mint-soft); }
.sd-pad.memo .key[data-v]:not(.erase) { background: var(--card); color: var(--mint-dark); font-size: clamp(.85rem, 3.6vw, 1.1rem); box-shadow: 0 4px 0 #BCE8D4; }
.sd-pad.memo .key.erase { box-shadow: 0 4px 0 #BCE8D4; }
.sd-memo-on { color: var(--mint-dark); font-family: var(--font-display); }
/* 숫자 패드: 5칸씩 두 줄 (한 줄 10칸은 폭 360 이하에서 화면 밖으로 넘쳤음) */
.sd-pad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.sd-pad .key { min-width: 0; height: 46px; padding: 0; border-radius: 12px; background: var(--card); box-shadow: 0 4px 0 var(--line); font-family: var(--font-display); font-size: clamp(1rem, 4.5vw, 1.4rem); color: var(--pink-dark); }
.sd-pad .key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.sd-pad .key.done { opacity: .3; }
.sd-pad .key.erase { color: var(--muted); font-size: 1rem; }

/* ── 배틀십 ── */
.bs { display: flex; flex-direction: column; gap: 10px; }
.bs-label { font-family: var(--font-display); display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
.bs-label .muted span { letter-spacing: -2px; color: var(--blue-dark); }
.bs-label .muted span.sunk { color: #D5C7CD; text-decoration: line-through; }
.bs-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; background: var(--card); padding: 5px; border-radius: 14px; box-shadow: var(--shadow); }
.bs-grid .c { aspect-ratio: 1; border-radius: 5px; background: #E1F0FB; display: flex; align-items: center; justify-content: center; font-size: clamp(.6rem, 3vw, 1rem); color: #7FB8E6; }
.bs-grid.foe .c { cursor: crosshair; }
.bs-grid .c.ship { background: #9C8A94; }
.bs-grid .c.ship.sh, .bs-grid .c.sunk.sh { border-radius: 0; box-shadow: 2px 0 0 #9C8A94, -2px 0 0 #9C8A94; }
.bs-grid .c.ship.sv, .bs-grid .c.sunk.sv { border-radius: 0; box-shadow: 0 2px 0 #9C8A94, 0 -2px 0 #9C8A94; }
.bs-grid .c.sh.s-first { border-radius: 50% 0 0 50%; box-shadow: 2px 0 0 #9C8A94; }
.bs-grid .c.sh.s-last { border-radius: 0 50% 50% 0; box-shadow: -2px 0 0 #9C8A94; }
.bs-grid .c.sv.s-first { border-radius: 50% 50% 0 0; box-shadow: 0 2px 0 #9C8A94; }
.bs-grid .c.sv.s-last { border-radius: 0 0 50% 50%; box-shadow: 0 -2px 0 #9C8A94; }
.bs-grid .c.ship.sel.sh, .bs-grid .c.ship.sel.sv { box-shadow: 0 0 0 2px #fff inset; }
.bs-grid .c.sunk.sh, .bs-grid .c.sunk.sv, .bs-grid .c.ship.hit.sh, .bs-grid .c.ship.hit.sv { box-shadow: none; }
.bs-grid .c.ship.sel { background: var(--pink); box-shadow: 0 0 0 2px #fff inset; }
.bs-grid .c.miss { color: #5A9AD1; font-weight: bold; }
.bs-grid .c.hit { background: #FFC2D4; }
.bs-grid .c.ship.hit { background: #E86A8C; }
.bs-grid .c.sunk { background: #4A3B44; }
.bs-grid .c.reveal { background: #D9CFD4; }
.bs-grid .c.last { outline: 3px solid var(--yellow); animation: pop3 .3s; }
@keyframes pop3 { from { transform: scale(1.4); } to { transform: scale(1); } }
.bs-grid.small { width: 60%; margin: 0 auto; padding: 3px; }
.bs-grid.small .c { font-size: .55rem; border-radius: 3px; }

/* ── 커넥트4 ── */
.c4 { display: flex; flex-direction: column; gap: 8px; }
.c4-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 10px; }
.c4-cols button { height: 36px; font-size: 1rem; border-radius: 8px; }   /* 30px 은 손가락엔 낮았다 — 칸을 눌러도 되지만 화살표도 36px */
.c4-cols button:not(.off):active { background: var(--pink-soft); }
.c4-board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; background: #7FB8E6; padding: 10px; border-radius: 18px; box-shadow: var(--shadow); }
.c4-cell { aspect-ratio: 1; border-radius: 50%; background: #E1F0FB; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 3px 6px rgba(0,0,0,.08); }
.c4-cell .chip { width: 88%; height: 88%; border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
.c4-cell .chip.drop { animation: drop .35s cubic-bezier(.3,1.4,.6,1); }
.c4-cell .chip.win { outline: 4px solid var(--yellow); }
@keyframes drop { from { transform: translateY(-300%); } to { transform: translateY(0); } }

/* ── 오셀로 ── */
.oth { display: flex; flex-direction: column; gap: 8px; }
.oth-score { display: flex; justify-content: center; gap: 10px; }
/* 닉네임은 띄어쓰기 없는 12자까지 온다. keep-all 이라 통째로 한 단어라서, 줄어들 수 있게 해 두지 않으면 칸이 화면 밖으로 터진다 */
.oth-score .p { background: var(--card); border-radius: 999px; padding: 6px 14px; display: flex; align-items: center; gap: 6px; box-shadow: 0 3px 10px rgba(0,0,0,.05); font-family: var(--font-display); min-width: 0; flex: 0 1 auto; }
.oth-score .p .stone, .oth-score .p b, .oth-score .p .me { flex: none; }   /* 이름이 줄어도 (나) 와 점수는 남는다 */
.oth-score .p .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oth-score .p.turn { outline: 3px solid var(--pink); }
.oth-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; background: #6FCF97; padding: 6px; border-radius: 16px; box-shadow: var(--shadow); }
.oth-cell { aspect-ratio: 1; background: #8FDDBB; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.oth-cell.hint { cursor: pointer; }
.oth-cell .dot { width: 26%; height: 26%; border-radius: 50%; background: rgba(74,59,68,.25); }
.stone { width: 84%; height: 84%; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.stone.s1 { background: radial-gradient(circle at 35% 35%, #7A6B74, #2E2329); }
.stone.s2 { background: radial-gradient(circle at 35% 35%, #fff, #D9CBB6); }
.stone.mini { width: 18px; height: 18px; display: inline-block; }
.stone.flip { animation: flip .4s; }
.stone.last { outline: 3px solid var(--pink); }
@keyframes flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.chat-input .btn { white-space: nowrap; flex-shrink: 0; }

/* ── PWA 설치 안내 ── */
.install-guide .steps { list-style: none; padding: 0; margin: 10px 0 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.install-guide .steps li { display: flex; gap: 10px; align-items: flex-start; background: var(--bg); border-radius: 14px; padding: 10px 12px; }
.install-guide .steps .icon { font-size: 1.4rem; width: 32px; text-align: center; flex-shrink: 0; }
.install-guide .steps b { font-family: var(--font-display); font-weight: normal; }
.install-guide .steps .muted { font-size: .82rem; line-height: 1.4; }
#btn-install-lobby { font-size: .85rem; }

/* ── 프로필 선택 ── */
.avatar-pick { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.avatar-pick .av { aspect-ratio: 1; border-radius: 12px; font-size: 1.4rem; background: var(--bg); border: 2px solid transparent; display: flex; align-items: center; justify-content: center; }
.avatar-pick .av.on { border-color: var(--pink); background: var(--pink-soft); transform: scale(1.08); }
.result .actions .row { gap: 8px; }
.avatar-pick { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.avatar-pick .av { min-width: 0; padding: 0; font-size: clamp(1.1rem, 5vw, 1.4rem); }

/* ── 아바타 이미지 ── */
.av-img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 50%; pointer-events: none; }
.avatar .face { padding: 3px; overflow: hidden; }
.avatar-pick .av { padding: 3px; background: transparent; }
.avatar-pick .av.on { background: var(--pink-soft); }
.avatar-pick { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.avatar-pick .av { padding: 2px; border-radius: 50%; }

/* 아바타 선택: 그리드 칸이 늘어나도 항상 정원 */
.avatar-pick { align-items: start; }
/* 작은 폰: 간격을 줄여 한 칸을 키운다 (6열 유지 — 5열로 줄이면 홈이 한 줄 길어져 "코드로 들어가기"가 밀린다) */
@media (max-width: 340px) { .avatar-pick { gap: 4px; } }
.avatar-pick .av { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; padding: 0; border: 0; background: none; border-radius: 50%; transform: none; }
.avatar-pick .av .av-img { width: 100%; height: 100%; aspect-ratio: 1 / 1; border-radius: 50%; box-sizing: border-box; border: 3px solid transparent; transition: transform .1s, border-color .1s; }
.avatar-pick .av.on { background: none; }
.avatar-pick .av.on .av-img { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); transform: scale(1.08); }

/* ── 게임 아이콘·결과 배지 ── */
.gicon { width: 2.4rem; height: 2.4rem; vertical-align: middle; display: inline-block; }
.gicon.sm { width: 1.25em; height: 1.25em; vertical-align: -0.28em; }
.gicon-emoji { font-size: 1.6rem; line-height: 1; width: auto; height: auto; }
.gicon-emoji.sm { font-size: 1em; }
.result-icon { width: 96px; height: 96px; display: block; margin: 0 auto; }
.result .big { line-height: 1; }
.rec-row .emoji .gicon { width: 1.9rem; height: 1.9rem; }
.rec-row.small .emoji .gicon { width: 1.5rem; height: 1.5rem; }


/* ── UI 아이콘 ── */
.uicon { width: 1.35em; height: 1.35em; vertical-align: -0.32em; display: inline-block; }
.uicon.sm { width: 1.2em; height: 1.2em; vertical-align: -0.28em; }
.uicon.lg { width: 1.7em; height: 1.7em; vertical-align: middle; }
.uicon.xl { width: 44px; height: 44px; display: block; }
.iconbtn .uicon { width: 24px; height: 24px; vertical-align: middle; }
.players .heart .uicon { width: 30px; height: 30px; }
.resume-card .big .uicon { width: 40px; height: 40px; }
.install-guide .big .uicon { margin: 0 auto; width: 56px; height: 56px; }
.mines-grid .cell .cell-ico { width: 72%; height: 72%; display: block; }
.chip .uicon { vertical-align: -0.3em; }
.turn-banner .uicon { vertical-align: -0.3em; }
.rec-head h2 .uicon { width: 1.2em; height: 1.2em; vertical-align: -0.2em; }

/* ── 계정·커플·프리미엄 ── */
.acct-card { background: var(--card); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.acct-card .row.wrap { gap: 8px; }
.acct-card .input { padding: 8px 12px; font-size: .95rem; }
.code-box { font-family: var(--font-display); letter-spacing: .2em; font-size: 1.4rem; background: var(--pink-soft); color: var(--pink-dark); border-radius: 12px; padding: 6px 14px; user-select: all; }
.btn.kakao { background: #FEE500; color: #191919; box-shadow: 0 6px 0 #D9C300; }
.btn.kakao:active { box-shadow: 0 2px 0 #D9C300; }
.acct .actions .row { gap: 8px; }
.acct .perks { text-align: left; margin: 8px 0; padding-left: 20px; font-size: .92rem; line-height: 1.6; }
.plans { display: flex; gap: 10px; margin: 6px 0; }
.plan { flex: 1; background: var(--bg); border: 2px solid var(--line); border-radius: 18px; padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.plan:active { border-color: var(--pink); }
.plan b { font-family: var(--font-display); font-size: 1.05rem; }
.plan .price { font-family: var(--font-display); color: var(--pink-dark); font-size: 1.2rem; }
.plan .muted { font-size: .72rem; }
.plan .tag { position: absolute; top: -10px; right: 8px; background: var(--yellow); color: var(--amber-text); font-size: .7rem; padding: 2px 8px; border-radius: 999px; font-family: var(--font-display); }
.pill.locked { opacity: .75; border-style: dashed; }

/* ── 가로 전용 게임(immersive) ── */
.room.immersive .topbar, .room.immersive .players { display: none; }
.room.immersive .stage { padding: 0; gap: 0; }
.room.immersive .startbar { padding-bottom: calc(6px + var(--safe-bottom)); }

/* ── 루미루미 (가로 전용) ── */
.rummi { position: fixed; inset: 0; z-index: 8; background: linear-gradient(135deg, #FFE9F0, #FFF6F0 45%, #EAF3FB); overflow: hidden;
  --tw: 29px; --th: 37px; --tf: 18px; --t-pink: #E8527A; --t-blue: #3F86C6; --t-orange: #E08A00; --t-dark: #3A2F36;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.rm-game { position: absolute; inset: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr) 62px; gap: 6px;
  padding: max(5px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
/* 자동 회전 꺼진 폰: 앱 전체를 90° 돌린다 (결과 창·하단 바·채팅도 같이 돌도록) */
body.rm-forced #app { max-width: none; margin: 0; min-height: 0; padding-top: 0; position: fixed; top: 0; left: 0; width: var(--rw); height: var(--rh); transform: rotate(90deg) translateY(-100%); transform-origin: top left; overflow: hidden; }
body.rm-forced .room { min-height: 100%; height: 100%; }
body.rm-forced .toast { left: calc(90px + var(--safe-bottom)); top: 50%; bottom: auto; transform: translate(-50%, -50%) rotate(90deg); }
body.rm-forced .netbar { top: 50%; left: auto; right: 0; transform: translate(50%, -50%) rotate(90deg); transform-origin: center; }

.rm-people { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 2px 0; min-height: 0; }
.rm-person { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11px; text-align: center; opacity: .75; transition: opacity .2s; }
.rm-person.turn { opacity: 1; }
.rm-person b { font-family: var(--font-display); font-weight: normal; font-size: 12px; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-ava { width: 50px; height: 50px; position: relative; }
.rm-face { position: absolute; inset: 5px; border-radius: 50%; background: var(--card); overflow: hidden; display: grid; place-items: center; font-size: 24px; }
.rm-face .av-img { width: 100%; height: 100%; }
.rm-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.rm-ring circle { fill: none; stroke-width: 4; }
.rm-ring .bg { stroke: transparent; }
.rm-ring .fg { stroke: transparent; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .25s linear; }
.rm-person.turn .rm-ring .bg { stroke: #fff; }
.rm-person.turn .rm-ring .fg { stroke: var(--pink); }
.rm-person.them.turn .rm-ring .fg { stroke: var(--blue); }
.rm-sec { position: absolute; right: -8px; top: -4px; min-width: 22px; height: 20px; border-radius: 999px; background: var(--pink-dark); color: #fff; font-family: var(--font-display); font-size: 12px; display: grid; place-items: center; padding: 0 5px; box-shadow: 0 0 0 2px #fff; }
.rm-sec[hidden] { display: none; }
.rm-person.them .rm-sec { background: var(--blue-dark); }
.rm-sec.hurry { background: #E5484D; }
.rm-person.off .rm-face { filter: grayscale(1); opacity: .6; }
.rm-off { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); font-size: 9px; white-space: nowrap; background: #E5484D; color: #fff; border-radius: 999px; padding: 0 5px; line-height: 14px; }
.rm-cnt { color: var(--muted); display: flex; align-items: center; gap: 3px; white-space: nowrap; font-size: 12px; }
.rm-pre { font-size: 12px; color: #fff; background: #C9B3BD; border-radius: 999px; padding: 0 6px; line-height: 17px; white-space: nowrap; }
.rm-mini { width: 8px; height: 11px; border-radius: 2px; background: #FFFDF8; box-shadow: inset 0 0 0 1px #D9C6B3; display: inline-block; }

.rm-center { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; }
.rm-board { flex: 1; min-height: 0; border-radius: 16px; background: #E6F4EC; box-shadow: inset 0 0 0 2px #D2EADC; padding: 6px; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; }
.rm-grid { display: grid; grid-auto-rows: var(--th); gap: 2px; justify-content: center; position: relative; }
.rm-cell { border-radius: 5px; background: rgba(255,255,255,.3); }
.rummi.picking.my-turn .rm-board .rm-cell { box-shadow: inset 0 0 0 1px rgba(255,143,171,.35); }
.rm-cell.hover { background: rgba(255,143,171,.3); box-shadow: inset 0 0 0 2px var(--pink) !important; }
/* 판이 작아졌을 때: 놓일 칸을 더 진하게, 모양 표시 생략 */
.rummi.tight .rm-board .rm-cell.hover { background: rgba(255,143,171,.6); box-shadow: 0 0 0 2px var(--pink-dark) !important; position: relative; z-index: 3; }
.rummi.tight .rm-board .rm-tile.hover { box-shadow: -3px 0 0 var(--pink-dark), inset 0 0 0 1px #E6D6C6; z-index: 3; }
.rm-grid.nomk .rm-tile .mk { display: none; }
.rummi.tight .rm-badtag { font-size: 8px; padding: 0 4px; line-height: 11px; transform: translateY(-75%); }
.rummi.tight .rm-badtag.below { transform: translateY(-25%); }
.rm-badtag { position: absolute; transform: translateY(-62%); font-family: var(--font-display); font-size: 10px; background: var(--t-pink); color: #fff; border-radius: 999px; padding: 1px 6px; white-space: nowrap; pointer-events: none; z-index: 3; }

.rm-rack { position: relative; border-radius: 14px; background: linear-gradient(#EBD2B9, #DDBB9A); padding: 0 6px 6px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); flex: none; max-height: calc(var(--th) * 3 + 34px); overflow-y: auto; }
.rm-rack .rm-grid { gap: 4px 2px; }
.rm-rack.scroll { touch-action: pan-y; box-shadow: inset 0 -4px 0 rgba(0,0,0,.08), inset 0 -14px 10px -10px rgba(120,80,40,.35); }
.rm-rack.scroll .rm-tile { touch-action: pan-y; }
.rm-cell.slot { background: rgba(120,80,40,.1); }
/* 받침대 위 안내 — 흐름 안에 둔다(띄워 두면 글자가 커질 때 받침대가 안 넓어져 타일을 덮는다).
   굴려도 맨 위에 붙어 있게 sticky. 밑으로 타일이 지나가니 제 바탕을 깔아 둔다 */
.rm-lip { position: sticky; top: 0; z-index: 2; margin: 0 4px; padding: 3px 4px 4px;
  background: #EBD2B9; font-family: var(--font-display); font-size: 12px; line-height: 1.25;
  color: #7A5634; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-rack.scroll .rm-lip { box-shadow: 0 3px 6px -2px rgba(120, 80, 40, .35); }
.rm-lip b { color: var(--pink-dark); font-weight: normal; }
.rm-lip em { font-style: normal; color: var(--pink-dark); }
.rm-lip .rm-foe-note { color: #2F6497; }   /* 상대가 방금 한 일 — 내 차례 안내 앞에 (알림은 금방 사라져 놓쳤다) */
.rm-lip em.ok { color: #2E9E5B; }

.rm-tile { width: var(--tw); height: var(--th); border-radius: 5px; background: linear-gradient(#FFFEFA, #FBF1E3); box-shadow: inset 0 0 0 1px #E6D6C6, 0 2px 0 #D5BFAA;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--tf); line-height: 1; position: relative; touch-action: none; cursor: grab; transition: transform .1s; }
.rm-tile .mk { font-size: max(7px, calc(var(--tf) * .5)); margin-top: 1px; opacity: .85; pointer-events: none; }
.rm-tile.p { color: var(--t-pink); } .rm-tile.b { color: var(--t-blue); } .rm-tile.o { color: var(--t-orange); } .rm-tile.k { color: var(--t-dark); }
.rm-tile.joker svg { width: 74%; height: 74%; pointer-events: none; }
/* 상대가 방금 낸 타일(연한 하늘색), 새로 뽑은 타일(초록 점) */
.rm-tile.last { background: linear-gradient(#F4F9FF, #E2EEFA); box-shadow: inset 0 0 0 2px #A9CDEE, 0 2px 0 #C9D6E2; }
.rm-tile.new::after { content: ''; position: absolute; top: 2px; right: 2px; width: max(5px, calc(var(--tw) * .17)); height: max(5px, calc(var(--tw) * .17)); border-radius: 50%; background: #2FBF71; box-shadow: 0 0 0 1.5px #fff; pointer-events: none; }
.rm-tile.hover { box-shadow: inset 3px 0 0 var(--pink-dark), inset 0 0 0 1px #E6D6C6, 0 2px 0 #D5BFAA; }
.rm-tile.placed { box-shadow: inset 0 0 0 2px #E0A100, 0 2px 0 #D5BFAA; }
.rm-tile.bad { box-shadow: inset 0 0 0 2px var(--t-pink), 0 2px 0 #D5BFAA; background: linear-gradient(#FFF6F8, #FDE8EE); }
.rm-tile.sel { transform: translateY(-5px); box-shadow: inset 0 0 0 2px var(--pink-dark), 0 6px 10px rgba(232,106,140,.35); z-index: 2; }
.rm-tile.sel.set { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--blue-dark), 0 5px 9px rgba(90,154,209,.35); }
.rm-tile.dragging { opacity: .35; }
.rm-ghost { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 30; display: flex; gap: calc(var(--tw) * .16 + 2px); margin: calc(var(--th) * -.6) 0 0 calc(var(--tw) * -.5 - var(--ga, 0) * (var(--tw) * 1.16 + 2px)); }
.rm-ghost[hidden] { display: none; }
.rm-ghost.over-board { margin-top: calc(var(--th) * -1.9); }
.rm-ghost .rm-tile { transform: scale(1.15); box-shadow: inset 0 0 0 2px var(--pink-dark), 0 10px 18px rgba(0,0,0,.2); }

.rm-side { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 0; padding: 1px 0; }
.rm-row2 { display: flex; gap: 4px; }
.rm-ic { width: 28px; height: 28px; border-radius: 50%; background: var(--card); display: grid; place-items: center; box-shadow: 0 2px 5px rgba(0,0,0,.08); position: relative; }
.rm-ic .uicon { width: 17px; height: 17px; }
/* 옆 칸이 좁아 그림은 28px 그대로, 누르는 자리만 36px 로 (보이지 않는 테두리) */
.rm-ic::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.rm-badge { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; border-radius: 8px; background: #E5484D; color: #fff; font-size: 9px; font-family: var(--font-display); display: grid; place-items: center; }
.rm-badge[hidden] { display: none; }
.rm-pool { font-family: var(--font-display); font-size: 12px; background: #FFF4D1; color: #8A6A00; border-radius: 999px; padding: 3px 8px; display: flex; align-items: center; gap: 3px; }
.rm-sq { width: 56px; height: 36px; border-radius: 12px; background: var(--card); font-family: var(--font-display); font-size: 16px; box-shadow: 0 3px 0 #EEDDE4; letter-spacing: 1px; flex: none; }
.rm-sq.run { color: var(--t-blue); } .rm-sq.grp { color: var(--t-pink); }
.rm-sq:active { transform: translateY(2px); box-shadow: 0 1px 0 #EEDDE4; }
.rm-spacer { flex: 1; min-height: 0; }
.rm-undo { width: 46px; height: 46px; border-radius: 50%; background: var(--card); display: grid; place-items: center; box-shadow: 0 3px 0 #EEDDE4; position: relative; color: var(--pink-dark); touch-action: none; flex: none; }
.rm-undo:disabled { opacity: .4; }
.rm-undo-ic { width: 22px; height: 22px; pointer-events: none; }
.rm-gauge { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); pointer-events: none; }
.rm-gauge circle { fill: none; stroke: var(--pink); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transition: stroke-dashoffset .25s ease-out, opacity .25s; }
.rm-undo.holding .rm-gauge circle, .rm-undo.filled .rm-gauge circle { opacity: 1; }
.rm-undo.holding .rm-gauge circle { stroke-dashoffset: 0; transition: stroke-dashoffset .85s linear; }
.rm-undo.filled { animation: rmpop .35s; }
.rm-undo.filled .rm-gauge circle { stroke-dashoffset: 0; transition: none; }
.rm-ok { width: 56px; height: 54px; border-radius: 18px; background: var(--pink); display: grid; place-items: center; box-shadow: 0 4px 0 #E0668A; flex: none; }
.rm-ok svg { width: 28px; height: 28px; }
.rm-ok.draw { background: var(--blue); box-shadow: 0 4px 0 var(--blue-dark); }
.rm-ok:disabled { background: #E9DDE2; box-shadow: 0 4px 0 #D8C9CF; }

.rm-rotate { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px;
  background: linear-gradient(135deg, #FFE9F0, #FFF6F0 45%, #EAF3FB); }
.rm-rotate[hidden] { display: none; }
.rm-rotate h2 { font-family: var(--font-display); font-size: 1.4rem; }
.rm-rotate p { color: var(--muted); }
.rm-rotate .btn { min-width: 240px; }
.rm-rotate .btn[hidden] { display: none; }
.rm-rotate .rm-small { font-size: .8rem; }
.rm-phone { width: 60px; height: 100px; border-radius: 14px; border: 4px solid var(--text); position: relative; animation: rmturn 2.2s ease-in-out infinite; margin-bottom: 6px; }
.rm-phone::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 16px; height: 4px; margin-left: -8px; border-radius: 2px; background: var(--text); }
@keyframes rmturn { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
@keyframes rmpop { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
/* 끝난 뒤 하단 바가 받침대를 가리지 않게 */
.room.immersive .startbar.endbar { z-index: 9; }

/* 높이가 낮은 화면(가로 폰): 결과 창·채팅을 압축해 잘리지 않게 */
@media (max-height: 520px) {
  .overlay { align-items: flex-start; overflow-y: auto; padding: 10px; }
  .overlay > * { margin: auto 0; }
  .overlay > .result { padding: 14px 18px; max-width: 520px; }
  .result .result-icon { width: 54px; height: 54px; }
  .result h2 { margin: 4px 0 2px; font-size: 1.35rem; }
  .result .summary { margin: 0 0 2px; }
  .result .actions { margin-top: 10px; gap: 6px; flex-direction: row; flex-wrap: wrap; }
  .result .actions > .btn { flex: 1 1 100%; padding-top: 10px; padding-bottom: 10px; }
  .result .actions .row { flex: 1 1 45%; }
  .result .actions .result-tools { flex: 1 1 100%; }
  .result .actions .btn { padding-top: 8px; padding-bottom: 8px; white-space: nowrap; font-size: .88rem; }
  /* 가로에선 서랍을 좁게 — 판과 손패가 옆에 그대로 보이게 */
  .chat-sheet { width: 300px; max-width: 60%; }
}
/* 돌려 보기 상태도 같은 압축 (미디어 쿼리는 세로 기준이라 따로) */
body.rm-forced .overlay { align-items: flex-start; overflow-y: auto; padding: 10px; }
body.rm-forced .overlay > * { margin: auto 0; }
body.rm-forced .overlay > .result { padding: 14px 18px; max-width: 520px; }
body.rm-forced .result .result-icon { width: 54px; height: 54px; }
body.rm-forced .result h2 { margin: 4px 0 2px; font-size: 1.35rem; }
body.rm-forced .result .summary { margin: 0 0 2px; }
body.rm-forced .result .actions { margin-top: 10px; gap: 6px; flex-direction: row; flex-wrap: wrap; }
body.rm-forced .result .actions > .btn { flex: 1 1 100%; padding-top: 10px; padding-bottom: 10px; }
body.rm-forced .result .actions .row { flex: 1 1 45%; }
body.rm-forced .result .actions .result-tools { flex: 1 1 100%; }
body.rm-forced .result .actions .btn { padding-top: 8px; padding-bottom: 8px; white-space: nowrap; font-size: .88rem; }
body.rm-forced .chat-sheet { width: 300px; max-width: 60%; }

/* 좁은 가로 화면(구형·소형 폰): 양옆 열을 줄여 판에 폭을 더 준다 */
@media (max-width: 700px) {
  .rm-game { grid-template-columns: 50px minmax(0, 1fr) 52px; gap: 4px; }
  .rm-ava { width: 42px; height: 42px; }
  .rm-face { inset: 4px; }
  .rm-person b { font-size: 12px; max-width: 54px; }
  .rm-sq { width: 48px; height: 32px; font-size: 14px; }
  .rm-undo { width: 40px; height: 40px; }
  .rm-ok { width: 48px; height: 46px; }
  .rm-board, .rm-rack { padding-left: 4px; padding-right: 4px; }
}

/* 가로(낮은) 화면 결과 창: 버튼을 같은 높이 한 줄로, 공유·내기는 아이콘만 */
@media (max-height: 520px) {
  .result .actions { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
  .result .actions .row { display: contents; }
  .result .actions .btn { flex: 1 1 0; min-width: 0; min-height: 0; height: 42px; padding: 0 8px; font-size: .85rem; white-space: nowrap; box-shadow: 0 3px 0 #F0DCE3; border-radius: 14px; }
  .result .actions #btn-again { flex: 1.5 1 0; box-shadow: 0 3px 0 #E0668A; }
  .result .actions .result-tools { flex: 2 1 0; }
  .result .rtool { font-size: 0; gap: 0; padding: 0; }   /* 낮은 화면에선 그림만 */
  .result .rtool .ic { width: 42px; height: 42px; }
  .overlay > .result { max-width: 600px; }
}
body.rm-forced .result .actions { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
body.rm-forced .result .actions .row { display: contents; }
body.rm-forced .result .actions .btn { flex: 1 1 0; min-width: 0; min-height: 0; height: 42px; padding: 0 8px; font-size: .85rem; white-space: nowrap; box-shadow: 0 3px 0 #F0DCE3; border-radius: 14px; }
body.rm-forced .result .actions #btn-again { flex: 1.5 1 0; box-shadow: 0 3px 0 #E0668A; }
body.rm-forced .result .actions .result-tools { flex: 2 1 0; }
body.rm-forced .result .rtool { font-size: 0; gap: 0; padding: 0; }
body.rm-forced .result .rtool .ic { width: 42px; height: 42px; }
body.rm-forced .overlay > .result { max-width: 600px; }
/* 결과 창이 떠 있을 땐 하단 바(같은 버튼) 숨김 */
.room.result-open .startbar.endbar { display: none; }
/* 루미루미: 끝나면 오른쪽 열이 끝난 판 버튼으로 */
.rm-endbtns { display: none; flex-direction: column; gap: 6px; width: 100%; align-items: center; }
.rummi.ended .rm-endbtns { display: flex; }
.rummi.ended .rm-sq, .rummi.ended .rm-undo, .rummi.ended .rm-ok { display: none; }
.rm-end { width: 58px; min-height: 50px; border-radius: 14px; background: var(--card); box-shadow: 0 3px 0 #EEDDE4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--font-display); font-size: 11px; color: var(--text); padding: 4px 2px; }
.rm-end .uicon { width: 20px; height: 20px; }
.rm-end.primary { background: var(--pink); color: #fff; box-shadow: 0 3px 0 #E0668A; min-height: 58px; }
.rm-end[hidden] { display: none; }
@media (max-width: 700px) { .rm-end { width: 50px; min-height: 44px; font-size: 10px; } .rm-end.primary { min-height: 50px; } }
.rm-badtag.below { transform: translateY(-38%); }

/* ── 3단계 다듬기: 줄바뀜·작은 표시 ── */
/* 배틀십: 빗나간 칸은 바탕색 + 또렷한 점 (글자 '·'는 2px 라 쏜 곳을 알아보기 어려웠음) */
.bs-grid .c.miss { background: #C7DCEE; }
.bs-grid .c.miss::after { content: ''; width: 30%; height: 30%; border-radius: 50%; background: #5A9AD1; }
.bs .row { flex-wrap: wrap; justify-content: center; }
.bs .row .btn.sm { white-space: nowrap; }
@media (max-width: 400px) { .bs .row { gap: 6px; } .bs .row .btn.sm { padding-left: 11px; padding-right: 11px; gap: 5px; font-size: .9rem; } }
/* 오목: 버튼이 두 줄로 접히지 않게, 정보 줄이 남는 폭을 씀 */
.omok .btn.sm { white-space: nowrap; }
/* 판 아래 정보 줄 — 점으로 잇지 않는다. 닉네임이 길면 제자리에서 줄어들고 줄이 안 넘친다 */
.side-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
/* 좁은 폰(320)에서 "여기에 놓기"가 뜨면 두 글자 이름까지 "지.."로 잘렸다(2px 모자람) — 한 줄은 지키고 간격만 좁힌다 */
@media (max-width: 360px) { .side-info { gap: 6px; } .side-info .p { gap: 3px; } .omok > .row { gap: 8px; } }
.side-info .p { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.side-info .p > :first-child { flex: none; }   /* 이름이 줄어들 때 돌까지 눌려 타원이 되지 않게 */
.side-info .p b { font-weight: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-info .n { flex: none; white-space: nowrap; opacity: .8; }
#omok-info { flex: 1; min-width: 0; }
.omok > .row { gap: 10px; flex-wrap: nowrap; }
/* 야찌: 고정 배지 한 줄, 점수 칸 확정 대기 표시 */
.die .lock { white-space: nowrap; }
table.score tr.pending th, table.score tr.pending td { background: var(--pink-soft); }
table.score tr.pending td.preview { opacity: 1; font-family: var(--font-display); }
table.score tr.pending th small.confirm { color: var(--pink-dark); font-family: var(--font-display); }
/* 오셀로: 둘 수 있는 자리 점을 더 또렷하게 */
.oth-cell .dot { width: 30%; height: 30%; background: rgba(74,59,68,.42); }
/* 결과 창·공유 카드 버튼 글자 한 줄 */
.result .actions .btn, #share-share, #share-save { white-space: nowrap; }
@media (max-width: 360px) { .result .actions .row .btn { padding-left: 8px; padding-right: 8px; gap: 5px; font-size: .88rem; } #share-share, #share-save { padding-left: 12px; padding-right: 12px; } }
/* 배틀십 바다 이름이 함대 막대에 밀려 '상대 바 / 다'로 접히지 않게 */
.bs-label { gap: 8px; white-space: nowrap; }
.bs-label > .muted { white-space: normal; text-align: right; min-width: 0; }
#share-save { text-decoration: none; }
/* 홈: 낮은 화면에선 로고를 줄여 닉네임·방 만들기(초대받은 사람은 들어가기)가 첫 화면에 들어오게 */
.home .tag b.invited { font-family: var(--font-display); letter-spacing: .1em; color: var(--pink-dark); }
@media (max-height: 760px) {
  .home { gap: 12px; padding-top: 16px; justify-content: flex-start; }
  .logo { width: 72px; height: 72px; }
  .home h1 { font-size: 2rem; margin-top: 0; }
}
/* 가로로 든 폰(손가락 조작·높이 520 이하)에서 게임 중이면 세로로 돌려 달라는 안내.
   루미루미(가로 전용)와 다빈치코드·보석상(가로 배치가 따로 있음)은 제외 */
.rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  body:not(.rotate-ok):not([data-game="davinci"]):not([data-game="gemshop"]) .room.in-game .rotate-hint { position: fixed; inset: 0; z-index: 15; /* 결과 창(20)·채팅은 이 안내 위에 뜬다 */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; background: var(--bg); }
}
.rotate-hint h2 { font-family: var(--font-display); font-size: 1.4rem; margin: 6px 0 0; }
.rotate-hint p { color: var(--muted); margin: 0 0 6px; }
.rotate-phone { width: 100px; height: 60px; border-radius: 14px; border: 4px solid var(--text); position: relative; animation: rotateback 2.2s ease-in-out infinite; margin: 20px 0 14px; }
.rotate-phone::after { content: ""; position: absolute; top: 50%; right: 6px; width: 4px; height: 16px; margin-top: -8px; border-radius: 2px; background: var(--text); }
@keyframes rotateback { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .rotate-phone { animation: none; transform: rotate(90deg); } }
/* 이모지 대신 그린 표시: 설치 안내 단계 번호, 커넥트4 칩·화살표, 차례 줄의 돌 */
.install-guide .steps .icon.step-no { width: 28px; height: 28px; border-radius: 50%; background: var(--pink); color: #fff; font-family: var(--font-display); font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.c4-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -2px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.c4-cols button { color: var(--pink-dark); display: flex; align-items: center; justify-content: center; }
.c4-arrow { width: 20px; height: 20px; }
.turn-banner .stone.mini, #omok-info .stone.mini { vertical-align: -3px; }
#omok-info .stone.mini { width: 14px; height: 14px; vertical-align: -2px; }
/* 그린 닫기 X, 표시 칸 X, 배틀십 함대 막대 */
.close-ic { width: 22px; height: 22px; color: var(--text); display: block; }
.wish .del .close-ic { width: 16px; height: 16px; color: var(--muted); }
.nono-grid .ncell.marked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10m0-10L7 17' stroke='%23B9AAB1' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 70% 70%; background-position: center; background-repeat: no-repeat; }
.bs-label .muted { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.bs-ship { display: inline-block; height: 9px; border-radius: 3px; background: var(--blue-dark); }
.bs-ship.sunk { background: #D5C7CD; }
.bs-grid .c .cell-ico { width: 76%; height: 76%; display: block; }
/* 배틀십: 낮은 화면에선 내 바다를 조금 더 작게 해 포격 화면에서 같이 보이게 */
@media (max-width: 380px) { .bs-grid.small { width: 50%; } }
/* 태블릿: 화면이 넓으면 본문도 조금 넓게 (판이 커짐) */
@media (min-width: 720px) { #app, #tut .tut-app { max-width: 600px; } .startbar .btn { max-width: 572px; } }
/* 야찌: 점수표 줄을 조금 촘촘하게 (표 길이 축소) */
table.score th, table.score td { padding: 5px 8px; }
table.score th small.hint { font-size: .75rem; }
/* 태블릿에서 본문이 넓어져도 배틀십 두 판은 같이 보이게 폭을 묶어 둔다 */
@media (min-width: 720px) { .bs-grid { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }   /* width 가 없으면 세로 기둥 안에서 28px 로 줄어들었다 (아이패드·컴퓨터) */ .bs-grid.small { width: 300px; } }
/* 말풍선은 내용 길이만큼 넓히되 화면을 넘지 않게 (좁게 접혀 글자가 잘리던 문제) */
.avatar .bubble { width: max-content; }
/* 기록 요약: 좁은 화면에서 '협동 클리어' 같은 이름이 두 줄로 접히지 않게 */
@media (max-width: 360px) { .records .rec-summary .muted { font-size: .7rem; } }
/* 말풍선이 화면 밖으로 나가지 않게: 왼쪽 사람은 왼쪽에, 오른쪽 사람은 오른쪽에 붙여서 */
.players .avatar:first-child .bubble { left: 0; right: auto; transform: none; }
.players .avatar:first-child .bubble::after { left: 24px; }
.players .avatar:last-child .bubble { left: auto; right: 0; transform: none; }
.players .avatar:last-child .bubble::after { left: auto; right: 24px; }
/* 말풍선은 아바타 아래로 (윗줄 버튼을 가리지 않게) */
.avatar .bubble { top: calc(100% + 6px); }
.avatar .bubble::after { top: -5px; bottom: auto; }

/* ── 쿼리도 ── */
.qd { display: flex; flex-direction: column; gap: 10px; }
.qd-score { display: flex; align-items: center; justify-content: space-between; background: var(--card); border-radius: 14px; padding: 7px 12px; box-shadow: var(--shadow); font-size: .85rem; }
.qd-score { gap: 8px; }
.qd-score .p { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); min-width: 0; flex: 0 1 auto; }
.qd-score .p b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-score .qd-w, .qd-score .qd-st, .qd-score .qd-chip { flex: none; white-space: nowrap; }
/* 좁은 화면에선 한 사람 몫을 두 줄로 쌓는다 (이름/벽 · 걸음) */
@media (max-width: 360px) {
  .qd-score { font-size: .8rem; padding: 6px 10px; }
  .qd-score .p { flex-wrap: wrap; row-gap: 0; max-width: 48%; }
  .qd-score .p b { flex: 0 1 auto; max-width: calc(100% - 20px); }
  .qd-st { flex-basis: 100%; padding-left: 20px; }
}
.qd-chip { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.qd-w { color: var(--pink-dark); font-size: .8rem; }
.qd-st { color: var(--muted); font-size: .75rem; }
.qd-wrap { display: flex; justify-content: center; }
/* 판: 칸 9개와 그 사이 홈 8개가 번갈아 놓인 바둑판 */
.qd-board { --qd-g: 7px; width: 100%; max-width: min(100%, 70vh); aspect-ratio: 1;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr) var(--qd-g)) minmax(0, 1fr); grid-template-rows: repeat(8, minmax(0, 1fr) var(--qd-g)) minmax(0, 1fr);
  background: #F6EFE6; border-radius: 14px; padding: 7px; box-shadow: var(--shadow); touch-action: manipulation; }
.qd-cell { background: #FFFDF8; border-radius: 5px; position: relative; display: grid; place-items: center; }
.qd-cell.goal-me { background: #FFEFF4; }        /* 내가 닿아야 하는 줄 */
.qd-cell.goal-foe { background: #EAF3FB; }
.qd-cell.last { box-shadow: inset 0 0 0 2px #EBDCCB; }
.qd-cell.can { cursor: pointer; }
.qd-dot { width: 34%; height: 34%; border-radius: 50%; background: var(--pink); opacity: .5; }
.qd-cell.can:active .qd-dot { opacity: .9; }
/* 둘째 자리는 판을 180도 돌려 본다(내 말이 아래). 말·벽은 제자리에서 다시 돌려 그림자가 아래로 가게 */
.qd-board.flip { transform: rotate(180deg); box-shadow: 0 -8px 24px rgba(255, 143, 171, .18); }   /* 그림자도 같이 돌아가니 거꾸로 줘서 아래로 보이게 */
.qd-board.flip .qd-pawn, .qd-board.flip .qd-wall { rotate: 180deg; }
.qd-pawn { width: 74%; height: 74%; border-radius: 50%; box-shadow: 0 2px 0 rgba(0,0,0,.18); background: #C9BFC4; }
.qd-pawn.me { box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 0 0 2px #fff; }
/* 말·표식 색 — 플레이어 색(c-*)을 그대로 쓴다 (다른 곳의 c-* 는 테두리·글자용이라 여기선 따로 정한다) */
.qd-pawn.c-pink, .qd-chip.c-pink { background: #F06A93; }
.qd-pawn.c-blue, .qd-chip.c-blue { background: #5A9AD1; }
.qd-pawn.c-yellow, .qd-chip.c-yellow { background: #F5B400; }
.qd-pawn.c-green, .qd-chip.c-green { background: #3B9E74; }
.qd-pawn.c-purple, .qd-chip.c-purple { background: #A98AE0; }
.qd-pawn.c-orange, .qd-chip.c-orange { background: #FF9F5A; }
.qd-pawn.c-teal, .qd-chip.c-teal { background: #46B3A9; }
.qd-pawn.c-red, .qd-chip.c-red { background: #FF7B7B; }
/* 세워진 벽 */
.qd-wall { border-radius: 4px; background: #B98E63; box-shadow: 0 1px 0 #9A7149; }
.qd-wall.mine { background: var(--pink-dark); box-shadow: 0 1px 0 #C9527A; }
.qd-wall.foe { background: var(--blue-dark); box-shadow: 0 1px 0 #4A86BB; }
.qd-wall.last { outline: 2px solid #fff; }
/* 벽을 놓을 자리 표시 — 누르는 건 판 전체가 받고(가장 가까운 자리로 붙는다), 이건 눈으로만 보는 선 */
.qd-slot { pointer-events: none; position: relative; }
/* 놓을 수 있는 자리는 아주 연하게만 — 판 전체가 분홍 격자로 뒤덮이면 어디가 벽인지 안 보인다 */
.qd-slot::after { content: ''; position: absolute; border-radius: 3px; background: #C9A88A; opacity: .22; }
.qd-slot.h::after { left: 22%; right: 22%; top: 50%; height: 3px; transform: translateY(-50%); }
.qd-slot.v::after { top: 22%; bottom: 22%; left: 50%; width: 3px; transform: translateX(-50%); }
/* 고른 자리 — 진짜 벽처럼 미리 보여 준다 */
.qd-wall.pending { background: var(--pink); opacity: .88; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(74,59,68,.28); animation: pop .15s ease-out; }
.qd-wall.pending.bad { background: var(--red); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(74,59,68,.28); }   /* 못 놓는 자리 */
.qd-board.wall-mode .qd-cell { opacity: .72; }   /* 벽을 세우는 중엔 칸을 뒤로 물린다 */
/* 벽을 끄는 동안엔 판 위 손짓이 화면 스크롤로 새면 안 된다 */
.qd-board.wall-mode { touch-action: none; }
.qd-tools { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.qd-tools[hidden] { display: none; }
/* 가로·세로 고르기 */
.qd-dirs { display: flex; gap: 6px; }
.qd-dirs .pill { display: inline-flex; align-items: center; gap: 6px; }
.qd-dirmark { display: inline-block; border-radius: 2px; background: currentColor; opacity: .75; }
.qd-dirmark.h { width: 16px; height: 4px; }
.qd-dirmark.v { width: 4px; height: 16px; }
/* 끄는 동안 바뀌는 걸음 수 */
.qd-arrow { font-style: normal; opacity: .55; margin: 0 1px; }
.qd-st .up { color: var(--red); }
.qd-st .down { color: var(--blue-dark); }
@media (max-width: 360px) { .qd-board { --qd-g: 6px; padding: 5px; } }

/* ── 숫자야구 ── */
.bb { display: flex; flex-direction: column; gap: 10px; }
/* 지금 누르고 있는 네 자리 */
.bb-slots { display: flex; justify-content: center; gap: 8px; }
.bb-slots.dim { opacity: .45; }
.bb-slot { width: 52px; height: 64px; border-radius: 12px; background: var(--card); border: 2px dashed var(--line);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.8rem; color: var(--text); }
.bb-slot.on { border-style: solid; border-color: var(--pink); box-shadow: 0 3px 0 #F3D9E2; }
/* 다음에 채워질 자리 — 어디에 들어갈지 보이게 (칸을 눌러 자리를 옮길 수도 있다) */
.bb-slot.at { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); }
.bb-slot.on.ready { background: var(--pink-soft); }
/* 짐작 칸 — 이럴 것 같다는 번호를 적어 두고 보면서 던진다. 서버로 안 가는 내 메모 */
.bb-memo { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.bb-memo[hidden] { display: none; }
.bb-memo-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.bb-memo-label { font-family: var(--font-display); font-size: .75rem; color: var(--muted); margin-right: 2px; }
.bb-memo-slot { width: 38px; height: 40px; border-radius: 9px; background: var(--bg2, #FFF8F4); border: 1.5px dashed var(--line);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.15rem; color: var(--muted); cursor: pointer; }
.bb-memo-slot.on { border-style: solid; border-color: #D8C8CF; color: var(--text); background: var(--card); }
.bb-memo-slot.at { border-color: var(--pink); box-shadow: 0 0 0 2px var(--pink-soft); }
.bb-memo-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bb-memo-btns .btn { padding: 6px 12px; font-size: .8rem; }
/* 짐작 칸에 적는 중엔 숫자판이 그쪽을 보고 있다는 걸 알린다 */
.bb-pad.to-memo .key { background: #FFF8F4; box-shadow: 0 3px 0 #EFE2DA; }

/* 숫자판 — 0~9 와 지우기 */
/* 0~9 열 개 + 지우기 = 열한 칸 → 여섯 칸씩 두 줄 (마지막 한 칸은 비운다) */
.bb-pad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.bb-pad[hidden] { display: none; }
.bb-pad .key { height: 46px; border-radius: 12px; background: var(--card); box-shadow: 0 3px 0 var(--line);
  font-family: var(--font-display); font-size: 1.2rem; color: var(--pink-dark); }
.bb-pad .key:disabled { opacity: .35; box-shadow: none; }
.bb-pad .key.used { background: var(--pink-soft); }
.bb-act { display: flex; justify-content: center; }
.bb-act[hidden] { display: none; }
.bb-act .btn { min-width: 200px; }
/* 던진 기록 두 줄 — 내 것과 상대 것을 나란히 */
.bb-logs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }   /* 1fr 은 내용이 크면 벌어진다(긴 닉네임) */
.bb-log > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-log { background: var(--card); border-radius: 14px; padding: 8px 6px; box-shadow: var(--shadow); min-height: 74px; }
.bb-log-head { font-family: var(--font-display); font-size: .82rem; color: var(--muted); text-align: center; margin-bottom: 4px; }
.bb-secret { color: var(--pink-dark); letter-spacing: .06em; }
.bb-row { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 2px 0; font-size: .86rem; }
.bb-row i { font-style: normal; font-size: .75rem; color: var(--muted); width: 16px; text-align: right; }
.bb-num { font-family: var(--font-display); letter-spacing: .08em; color: var(--text); }
.bb-s { color: var(--pink-dark); font-weight: 400; }
.bb-b { color: var(--blue-dark); font-weight: 400; }
.bb-out { color: var(--muted); font-size: .8rem; }
.bb-hit { color: var(--pink-dark); font-weight: 400; }
.bb-empty { font-size: .78rem; padding: 8px 0; }
@media (max-width: 360px) {
  .bb-slot { width: 44px; height: 56px; font-size: 1.5rem; }
  .bb-pad .key { height: 42px; font-size: 1.05rem; }
  .bb-act .btn { min-width: 0; width: 100%; }
}

/* ── 다빈치코드 ── */
.dv { display: flex; flex-direction: column; gap: 10px; }
.dv-side { display: flex; flex-direction: column; gap: 6px; }
.dv-label { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-size: .95rem; }
.dv-label .muted { font-size: .8rem; }
.dv-row { display: flex; justify-content: center; align-items: flex-end; gap: 6px; flex-wrap: wrap; } /* 눕힌(공개된) 타일이 바닥에 붙게 */
/* 줄 양 끝의 "작은 / 큰" — 어느 쪽이 작은 수인지 늘 보이게 */
.dv-end { align-self: center; font-family: var(--font-display); font-size: .75rem; color: var(--muted); white-space: nowrap; }
.dv-tile { width: 46px; height: 64px; border-radius: 10px; font-family: var(--font-display); font-size: 1.5rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 rgba(0,0,0,.12); transition: transform .1s; }
.dv-tile.black { background: #3B3238; color: #fff; }
.dv-tile.white { background: #FFFDF8; color: #4A3B44;   /* 다크 모드에서도 흰 타일 숫자는 진하게 (var(--text) 면 밝은 글자가 크림 타일 위라 안 보였다) */ box-shadow: 0 3px 0 #E6D6C6; }
.dv-tile.back { background: #C9BFC4; color: #fff; }
/* 공개된 타일은 앞으로 눕혀 놓은 모양 — 키가 낮아지고, 그림자가 없어지고, 점선 테두리가 붙는다.
   숨은 타일은 서 있고 공개된 타일은 누워 있어서 흘깃 봐도 구분된다 (색이 아니라 모양으로). */
.dv-tile.open { height: 34px; border-radius: 7px; box-shadow: none; border: 1.5px dashed; font-size: 1.05rem; }
.dv-tile.open.white { background: #F4EDE8; color: #9B8A92; border-color: #CDBCC4; }
.dv-tile.open.black { background: #7E7178; color: #F0E8EC; border-color: #BCAEB5; }
.dv-tile.pick { outline: 3px solid var(--pink); transform: translateY(-5px); }
/* 직전 한 수: 그 타일 위에 말풍선 — 마주 앉아 카드를 짚으며 말하는 그 장면 */
.dv-tile { position: relative; }
.dv-tile.said { outline: 3px solid var(--red); outline-offset: 1px; }
.dv-tile.said.ok { outline-color: var(--blue-dark); }
.dv-said { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff; font-family: var(--font-display); font-size: .9rem; line-height: 1;
  padding: 5px 9px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 2px 5px rgba(74,59,68,.22); animation: pop .18s ease-out; }
.dv-said::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--red); }
.dv-row.has-said { padding-top: 30px; }
/* 직전 한 수를 한 문장으로 (숫자판 위) */
.dv-said-line { text-align: center; font-size: .85rem; color: var(--muted); }
.dv-said-line[hidden] { display: none; }
.dv-said-line b { color: var(--text); }
.dv-said-line b.v { color: var(--pink-dark); font-size: 1rem; }
.dv-said-line .bad { color: var(--red); font-weight: 700; }
.dv-said-line .ok { color: var(--blue-dark); font-weight: 700; }
.dv-tile.held { width: 34px; height: 46px; font-size: 1.1rem; }
.dv-row.foe .dv-tile:not(.open) { cursor: pointer; }
.dv-mid { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: .85rem; color: var(--muted); background: var(--card); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); align-self: center; }
.dv-drawn { display: flex; align-items: center; gap: 6px; }
.dv-pad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.dv-pad[hidden] { display: none; }
.dv-pad .key { height: 44px; border-radius: 12px; background: var(--card); box-shadow: 0 3px 0 var(--line); font-family: var(--font-display); font-size: 1.1rem; color: var(--pink-dark); }
.dv-pad .key.on { background: var(--pink); color: #fff; box-shadow: 0 3px 0 var(--pink-dark); }
.dv-actions { display: flex; gap: 8px; justify-content: center; }
.dv-actions[hidden] { display: none; }
/* 손패는 길어지면 접힌다. 폰에서는 타일을 조금 줄여 한 줄에 한 장이라도 더 들어가게 한다 */
@media (max-width: 430px) { .dv-tile:not(.held) { width: 38px; height: 54px; font-size: 1.25rem; } .dv-tile.open { height: 30px; font-size: .95rem; } }
/* 가로로 든 폰: 숫자판을 오른쪽으로 보내면 손패가 한 줄로 길게 들어간다 (강제는 아니다 — 세로로도 그대로 된다) */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  body[data-game="davinci"] #app, body[data-game="davinci"] #tut .tut-app { max-width: none; }
  body[data-game="davinci"] .dv { display: grid; grid-template-columns: minmax(0, 1fr) 168px; column-gap: 10px; row-gap: 4px; align-items: start; }
  body[data-game="davinci"] .dv > * { grid-column: 1; }
  body[data-game="davinci"] .dv > .dv-pad { grid-column: 2; grid-row: 1 / span 8; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-game="davinci"] .dv-tile:not(.held) { width: 36px; height: 46px; font-size: 1.1rem; }
  body[data-game="davinci"] .dv-tile.open { height: 26px; font-size: .85rem; }
  body[data-game="davinci"] .dv-tile.held { width: 24px; height: 32px; font-size: .85rem; }
  body[data-game="davinci"] .dv-row { gap: 5px; }
  body[data-game="davinci"] .dv-pad .key { height: 36px; font-size: .95rem; }
  body[data-game="davinci"] .dv-mid { padding: 5px 10px; font-size: .75rem; }
  body[data-game="davinci"] .turn-banner { padding: 5px 10px; font-size: .9rem; }
  body[data-game="davinci"] .dv-side { gap: 1px; }
  body[data-game="davinci"] .dv-label { font-size: .85rem; }
}

/* ── 구룡투 ── */
.gr { display: flex; flex-direction: column; gap: 10px; }
.gr-score { display: flex; align-items: center; justify-content: space-between; background: var(--card); border-radius: 14px; padding: 8px 14px; box-shadow: var(--shadow); font-size: .9rem; }
.gr-score { gap: 8px; }
.gr-score .p { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); min-width: 0; flex: 0 1 auto; }
.gr-score .p b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: normal; }
.gr-score .n, .gr-score .r { flex: none; white-space: nowrap; }
.gr-score .n { font-size: 1.3rem; color: var(--pink-dark); }
.gr-score .r { font-size: .8rem; color: var(--muted); }
/* 왼쪽이 나 — 점수판·기록 줄과 같은 순서. 분홍 쪽이 내 자리 */
.gr-table { display: flex; align-items: stretch; justify-content: center; gap: 16px; background: linear-gradient(200deg, #FFF3D1, #FFE1EA); border-radius: 18px; padding: 10px 14px; }
.gr-side { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gr-who { font-size: .78rem; color: var(--muted); font-family: var(--font-display); }
.gr-slot { min-height: 64px; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; justify-content: center; }
.gr-slot small { font-size: .75rem; color: var(--muted); }
.gr-vs { font-family: var(--font-display); color: var(--muted); font-size: .85rem; align-self: center; }
.gr-empty { color: var(--muted); font-size: .85rem; }
.gr-vs.big { font-size: 1.5rem; animation: pop3 .3s; }
.gr-vs.big.win { color: var(--pink-dark); }
.gr-vs.big.lose { color: var(--blue-dark); }
.gr-hand .gr-tile:disabled:not(.used) { opacity: .6; }
.gr-tile { width: 52px; height: 70px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.6rem; box-shadow: 0 3px 0 rgba(0,0,0,.14); }
.gr-tile.black { background: #3B3238; color: #fff; }
.gr-tile.white { background: #FFFDF8; color: #4A3B44; box-shadow: 0 3px 0 #E6D6C6; }
.gr-tile.back { opacity: .9; }
.gr-tile.unknown { background: #EFE5E9; color: var(--muted); box-shadow: 0 3px 0 #E0D2D8; } /* 홀짝도 못 본 타일 */
.gr-tile.used { opacity: .3; }
.gr-tile.pick { outline: 3px solid var(--pink); transform: translateY(-4px); }
.gr-tile.sm { width: 30px; height: 40px; font-size: 1rem; border-radius: 8px; box-shadow: none; }
.gr-hand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.gr-hand .gr-tile { width: 100%; }
.gr-log { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto; }
.gr-log-row { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 12px; padding: 4px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.gr-log-row i { font-style: normal; font-size: .75rem; color: var(--muted); width: 16px; }
.gr-log-row .gr-vs-s { font-size: .8rem; font-family: var(--font-display); }
.gr-log-row small { font-size: .75rem; color: var(--muted); margin-left: -4px; }
.gr-log-row i + .gr-tile { margin-left: 2px; }
.gr-log-row.win .gr-vs-s { color: var(--pink-dark); }
.gr-log-row.lose .gr-vs-s { color: var(--blue-dark); }
.gr-log-row.draw .gr-vs-s { color: var(--muted); }
@media (max-width: 360px) { .gr-tile { height: 60px; font-size: 1.35rem; } .gr-tile.sm { width: 26px; height: 34px; font-size: .9rem; } }

/* ── 체스 ── */
.ch { display: flex; flex-direction: column; gap: 8px; }
.ch-board-wrap { display: flex; justify-content: center; }
/* 8×8 이 항상 정사각형: 줄 높이를 안 정하면 기물이 있는 줄만 키가 커진다 */
.ch-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); width: 100%; max-width: min(100%, 70vh); aspect-ratio: 1; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); touch-action: manipulation; }
.ch-sq { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; min-height: 0; }
.ch-sq.light { background: #FFF3E7; }
.ch-sq.dark { background: #E3C2A8; }
.ch-sq.last { box-shadow: inset 0 0 0 3px var(--yellow); }
.ch-sq.sel { box-shadow: inset 0 0 0 3px var(--pink); }
.ch-sq.check { background: #FFC2D4; }
.ch-piece { width: 84%; height: 84%; display: block; pointer-events: none; }
.ch-piece[src*="/chess/w"] { filter: drop-shadow(0 1px 0 rgba(74, 59, 68, .55)) drop-shadow(0 0 1px rgba(74, 59, 68, .5)); }
.ch-piece.sm { width: 22px; height: 22px; }
.ch-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26%; aspect-ratio: 1; height: auto; border-radius: 50%; background: rgba(74,59,68,.3); pointer-events: none; }
.ch-sq.take .ch-dot { width: 86%; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 4px rgba(232,106,140,.8); }
.ch-taken { display: flex; flex-wrap: wrap; gap: 2px; min-height: 24px; justify-content: center; }
.ch-moves { display: flex; align-items: center; gap: 6px; overflow-x: auto; font-size: .82rem; color: var(--muted); background: var(--card); border-radius: 12px; padding: 3px 8px; box-shadow: 0 2px 8px rgba(0,0,0,.04); white-space: nowrap; }
.ch-moves span.me { color: var(--pink-dark); font-family: var(--font-display); }
/* 기보의 수는 눌러서 그때 판으로 되감을 수 있다 */
.ch-san { background: none; border: 0; padding: 3px 6px; min-height: 36px; min-width: 36px; border-radius: 8px; font: inherit; color: inherit; cursor: pointer; flex: none; }   /* 안 줄어든다 — 수가 많아지면 칸이 36px 까지 줄어 "116.f7Kg4" 처럼 옆 칸과 붙었다 */
.ch-san.me { color: var(--pink-dark); font-family: var(--font-display); }
.ch-san.at { background: var(--pink-soft, #FFE4EC); color: var(--pink-dark); }
/* 기보 줄 = 되감기 버튼 + 기보 + 지금 (한 줄로 묶어 화면을 덜 차지하게) */
.ch-log { display: flex; align-items: stretch; gap: 6px; }
.ch-log .ch-moves { flex: 1; min-width: 0; }
.ch-rv { display: flex; align-items: center; justify-content: center; width: 38px; min-height: 36px; flex: none; border: 0; border-radius: 12px; background: var(--card); box-shadow: 0 2px 8px rgba(0,0,0,.05); cursor: pointer; }
.ch-rv:disabled { opacity: .3; }
.ch-rv[hidden], .ch-live[hidden] { display: none; }
.ch-rv .uicon.sm { width: 16px; height: 16px; }
.ch-live { flex: none; }
.ch-board.reviewing { outline: 3px solid var(--blue); outline-offset: 2px; }
/* 무승부 제안 바 */
.ch-offer { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; background: var(--card); border-radius: 14px; padding: 6px 8px; font-size: .82rem; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.ch-offer[hidden] { display: none; }
.ch-promo { position: fixed; inset: 0; background: rgba(74,59,68,.45); display: flex; align-items: center; justify-content: center; z-index: 25; }
.ch-promo[hidden] { display: none; }
.ch-promo-box { background: var(--card); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: center; box-shadow: var(--shadow); }
.ch-promo-row { display: flex; gap: 8px; }
.ch-promo-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--bg); border-radius: 14px; padding: 8px; font-size: .75rem; color: var(--muted); min-width: 60px; }
.ch-promo-btn .ch-piece { width: 40px; height: 40px; }
/* 다빈치코드 조커·자리 고르기 */
.dv-tile.joker { font-size: .78rem; letter-spacing: -.02em; }
.dv-pad .key.joker { grid-column: span 2; font-size: .95rem; }
/* 넣을 자리 버튼 — ＋ 글자가 20px 라 22px 칸에선 삐져나갔다. 손가락으로 누를 것이라 조금 더 넓힌다 */
.dv-slot { width: 36px; min-height: 40px; flex: none; align-self: stretch; border-radius: 8px; background: var(--pink-soft); color: var(--pink-dark); font-size: .95rem; line-height: 1; padding: 0; border: 2px dashed var(--pink); }
.dv-slot:active, .dv-slot.on { background: var(--pink); color: #fff; border-style: solid; }

/* ── 보석상 ── */
/* 보석 색: 다이아(흰)·사파(파랑)·에메(초록)·루비(빨강)·줄마노(검정)·황금(노랑). 색만으론 헷갈리는 사람을 위해 모양도 다르다 */
.gs { --gd: #F4F1F6; --gd-d: #B9AFC4; --gs: #6FA8E8; --gs-d: #3F7FC6; --ge: #6FCF97; --ge-d: #2E9E62;
      --gr: #F07A7A; --gr-d: #C84F4F; --go: #5C4E5C; --go-d: #2E2430; --gg: #FFD166; --gg-d: #D9A62E;
      display: flex; flex-direction: column; gap: 8px; }
.gs .center { text-align: center; }
.gs .small { font-size: .82rem; }
.gs .row { display: flex; gap: 8px; }
.gs-gem { display: inline-block; width: 16px; height: 16px; flex: none; vertical-align: -3px; border: 2px solid; box-sizing: border-box; }
.gs-gem.d { background: var(--gd); border-color: var(--gd-d); border-radius: 50%; }
.gs-gem.s { background: var(--gs); border-color: var(--gs-d); border-radius: 4px; }
.gs-gem.e { background: var(--ge); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border: 0; }
.gs-gem.r { background: var(--gr); border-color: var(--gr-d); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.gs-gem.o { background: var(--go); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border: 0; }
.gs-gem.g { background: var(--gg); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border: 0; }
.gs-gem.tiny { width: 12px; height: 12px; vertical-align: -2px; }
/* 가격 알갱이 — 색 동그라미 위에 숫자 */
.gs-pip { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: .78rem; font-weight: 700; color: #fff; border: 1.5px solid rgba(0,0,0,.12); flex: none; }
.gs-pip.d { background: var(--gd); color: #6E6478; } .gs-pip.s { background: var(--gs); } .gs-pip.e { background: var(--ge); }
.gs-pip.r { background: var(--gr); } .gs-pip.o { background: var(--go); } .gs-pip.g { background: var(--gg); color: var(--amber-text); }

/* 상대 줄 */
/* 좁은 폰·큰 글자에선 두 줄로 접힌다 (이름·할인 / 보석·예약·점수) — 점수가 화면 밖으로 밀리지 않게 */
/* 한 사람 줄 — 상대(판 위)와 나(판 아래)가 같은 모양. 1줄: 이름 · 산 카드(할인) · 점수, 2줄: 가진 보석 · 카드·귀족·보석 수, 3줄: 예약 */
.gs-foe, .gs-me { background: var(--card); border-radius: var(--radius-sm); padding: 6px 10px; display: flex; flex-direction: column; gap: 5px; font-size: .88rem; min-width: 0; }
.gs-me { outline: 2px solid var(--pink-soft); }
.gs-foe .row1, .gs-me .row1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.gs-foe .row1 .score, .gs-me .row1 .score { margin-left: auto; }
.gs-foe .nm, .gs-me .nm { font-family: var(--font-display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30%; }
/* 색마다 "낼 수 있는 힘" — 큰 수는 할인+보석, 밑에 둘을 갈라 적는다 */
.gs .power { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.gs .pw { display: flex; flex-direction: column; align-items: center; gap: 0; background: #FDF7FA; border-radius: 10px; padding: 2px 2px 3px; min-width: 0; }
.gs .pw .top { display: flex; align-items: center; gap: 3px; }
.gs .pw.zero { opacity: .5; }
.gs .pw .sum { font-family: var(--font-display); font-weight: normal; font-size: 1.05rem; line-height: 1; }
.gs .pw .parts { display: flex; flex-direction: column; align-items: center; line-height: 1.2; font-size: .75rem; color: var(--muted); white-space: nowrap; }
.gs .pw .parts i { font-style: normal; }
.gs .pw .parts i.d { color: var(--pink-dark); }
.gs .pw .parts i.z { opacity: .55; }
.gs .powerlab { font-size: .75rem; color: var(--muted); text-align: center; }
.gs-gem.lg { width: 20px; height: 20px; }
/* 가진 카드 보기 칩 */
.gs-cardschip { font: inherit; font-family: var(--font-display); font-size: .82rem; color: var(--pink-dark); background: var(--pink-soft); border: 0; border-radius: 999px; padding: 3px 12px; cursor: pointer; white-space: nowrap; min-height: 36px; }
.gs-cardschip b { font-weight: normal; }
/* 가진 카드 판 — 색깔별로 쌓아서 */
.gs-groups { display: flex; flex-direction: column; gap: 6px; }
.gs-groups .grp { display: flex; align-items: flex-start; gap: 8px; }
.gs-groups .grp.empty { opacity: .55; }
.gs-groups .key { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 34px; flex: none; padding-top: 4px; }
.gs-groups .key b { font-family: var(--font-display); font-weight: normal; font-size: .95rem; }
.gs-groups .key small { font-size: .75rem; color: var(--muted); }
.gs-groups .cards, .gs-sheet .part .cards { display: flex; flex-wrap: wrap; gap: 4px; }
.gs-groups .none { font-size: .8rem; color: var(--muted); padding-top: 10px; }
.gs-sheet .part { display: flex; flex-direction: column; gap: 4px; border-top: 1px dashed var(--line); padding-top: 8px; }
.gs-sheet .part .lab { font-size: .78rem; color: var(--muted); }
.gs-sheet .sums { border-top: 1px dashed var(--line); padding-top: 8px; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 2px 14px; }   /* 덩어리째 줄이 바뀐다 (· 없이) */
.gs-sheet .sums b { font-family: var(--font-display); font-weight: normal; color: var(--pink-dark); }
.gs .tally { margin-left: auto; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.gs .tally b { font-weight: 700; color: var(--text); }
.gs .tally b.over { color: var(--red); }
.gs-foe .res, .gs-me .res { display: flex; align-items: center; gap: 6px; }
.gs-foe .res .lab, .gs-me .res .lab { font-size: .78rem; color: var(--muted); flex: none; }
.gs-card.mini { width: 44px; }
.gs-card.mini .band { height: 18px; padding: 1px 3px; } .gs-card.mini .pts { font-size: .78rem; } .gs-card.mini .gs-gem { width: 11px; height: 11px; }
.gs-card.mini .cost { gap: 1px; padding: 2px; } .gs-card.mini .cost .gs-pip { width: 15px; height: 15px; font-size: min(.75rem, 12px); } .gs-card.mini .tier { display: none; }
.gs-card.back.mini { cursor: default; } .gs-card.back.mini .dots b { width: 3px; height: 3px; }
.gs-foe .score, .gs-me .score { font-family: var(--font-display); font-size: 1.05rem; flex: none; }
.gs-foe .score small, .gs-me .score small { font-size: .75rem; opacity: .7; }

/* 귀족 — 이름 없이 요구 색만 */
.gs-nobles { display: flex; justify-content: center; gap: 8px; }
.gs-nobles.pick { gap: 14px; margin: 10px 0; }
.gs-noble { position: relative; width: 66px; height: 44px; border-radius: 10px; background: linear-gradient(160deg, #FFF3D1, #FFE1EA); border: 2px solid #F3D3A8; display: flex; align-items: center; justify-content: center; gap: 4px; }
.gs-noble .pts { position: absolute; left: 5px; top: 1px; font-family: var(--font-display); font-size: .82rem; color: var(--amber-text); }
.gs-noble .face { position: absolute; right: 6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #FFD5B8; border: 1.5px solid #E8A87C; }
.gs-noble .req { display: flex; gap: 3px; margin-top: 10px; }
.gs-noble .blk { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; font-size: .75rem; font-weight: 700; color: #fff; }
.gs-noble .blk.d { background: var(--gd); color: #6E6478; } .gs-noble .blk.s { background: var(--gs); } .gs-noble .blk.e { background: var(--ge); } .gs-noble .blk.r { background: var(--gr); } .gs-noble .blk.o { background: var(--go); }
.gs-noble.on { outline: 3px solid var(--pink); outline-offset: 2px; transform: scale(1.06); }
.gs-noble[data-act] { cursor: pointer; width: 88px; height: 58px; }
.gs-noble[data-act] .req { gap: 5px; } .gs-noble[data-act] .blk { width: 20px; height: 20px; font-size: .8rem; }

/* 눕히기 안내 — 세로도 되지만 가로가 한 화면에 들어온다는 것만 알려 준다 (닫으면 이 기기에선 끝) */
.gs-tip { display: flex; align-items: center; gap: 8px; background: var(--blue-soft); color: var(--blue-dark); border-radius: 12px; padding: 7px 8px 7px 12px; font-size: .85rem; }
.gs-tip[hidden] { display: none; }
.gs-tip span { flex: 1; min-width: 0; }
.gs-tip b { font-weight: 700; }
.gs-tip .x { display: inline-flex; align-items: center; justify-content: center; color: var(--blue-dark); background: transparent; border: 0; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; flex: none; padding: 0; }
.gs-tip .x .close-ic { width: 16px; height: 16px; }
/* 상대가 한 일 — 보석 알갱이·카드·귀족 딱지를 그대로 보여 준다 (글로만 적으면 뭘 가져갔는지 안 남는다) */
.gs-said { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; background: var(--card); border-radius: var(--radius-sm); padding: 6px 10px; min-height: 46px; box-sizing: border-box; }
.gs-said[hidden] { display: none; }
.gs-said .who { font-family: var(--font-display); font-size: .82rem; color: var(--pink-dark); flex: none; }
.gs-said .empty { font-size: .8rem; color: var(--muted); }
.gs-said .mv { display: inline-flex; align-items: center; gap: 5px; background: var(--pink-soft); border-radius: 999px; padding: 3px 10px 3px 6px; animation: gs-pop .2s ease-out; }
.gs-said .mv .gems { display: inline-flex; gap: 3px; }
.gs-said .mv .lab { font-size: .8rem; display: flex; flex-direction: column; line-height: 1.2; }   /* 설명은 줄마다 따로 — · 로 이으면 좁은 칸에서 아무 데서나 접혔다 */
.gs-said .gs-card.mini { margin: -2px 0; }
.gs-said .gs-noble.mini { margin: -2px 0; }
.gs-said.in-col { flex-direction: column; align-items: flex-start; margin-top: auto; min-height: 0; padding: 0; background: none; gap: 3px; }
.gs-said.in-col .mv { padding: 2px 8px 2px 5px; }
@keyframes gs-pop { from { transform: scale(.9); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.gs-gem.big { width: 20px; height: 20px; }
/* 데려간 귀족 딱지 (작은 것) — 어느 귀족을 가졌는지 판 내내 보인다 */
.gs-noble.mini { width: 50px; height: 33px; border-radius: 8px; gap: 2px; }
.gs-noble.mini .pts { left: 4px; top: 0; font-size: .75rem; }
.gs-noble.mini .face { right: 3px; top: 3px; width: 6px; height: 6px; border-width: 1px; }
.gs-noble.mini .req { margin-top: 9px; gap: 2px; }
.gs-noble.mini .blk { width: 14px; height: 14px; font-size: .75rem; border-radius: 3px; }
.gs-foe .mynobles, .gs-me .mynobles { display: inline-flex; gap: 4px; }
.gs-foe .res.nobles .lab, .gs-me .res.nobles .lab { min-width: 0; }
/* 카드 12장 + 더미 — 한 줄에 5 (카드 4 + 더미) */
.gs-market { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 5px 4px; align-items: stretch; }
.gs-market .lv { writing-mode: vertical-rl; text-orientation: mixed; font-size: .75rem; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.gs-card { position: relative; aspect-ratio: 5 / 7; border-radius: 8px; background: var(--card); border: 2px solid var(--line); box-shadow: 0 2px 6px rgba(0,0,0,.06); display: flex; flex-direction: column; overflow: hidden; cursor: pointer; min-width: 0; }
.gs-card.empty { background: transparent; border: 2px dashed var(--line); box-shadow: none; cursor: default; }
.gs-card .band { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; height: 24px; }
.gs-card .band.d { background: #F4F1F6; } .gs-card .band.s { background: #DDEBFA; } .gs-card .band.e { background: #DDF5E8; } .gs-card .band.r { background: #FDE1E1; } .gs-card .band.o { background: #E4DDE4; }
.gs-card .pts { font-family: var(--font-display); font-size: .95rem; line-height: 1; }
.gs-card .pts.zero { visibility: hidden; }
.gs-card .cost { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px 3px; align-content: flex-start; flex: 1; }
/* 카드 속 숫자는 동그라미(16px)를 넘지 않게 묶는다 — 기기 글자를 키우면 가격 넷짜리가 카드 밖으로 넘쳤다 */
.gs-card .cost .gs-pip { width: 16px; height: 16px; font-size: min(.75rem, 12.5px); }
/* 단계 점은 판에선 뺀다(줄마다 "N단계" 가 있다) — 가격 두 줄이 들어갈 자리. 크게 보는 판(사기 판)에만 남긴다 */
.gs-card .tier { display: none; gap: 2px; justify-content: center; padding-bottom: 3px; }
.gs-card.big .tier { display: flex; }
.gs-card .tier b, .gs-card .dots b { width: 4px; height: 4px; border-radius: 50%; background: var(--line); display: inline-block; }
.gs-card.can { border-color: var(--pink); box-shadow: 0 0 0 2px rgba(255,143,171,.35), 0 2px 8px rgba(255,143,171,.3); }
.gs-card.back { background: repeating-linear-gradient(135deg, #FFE1EA 0 6px, var(--tint) 6px 12px); border-color: #F6C6D3; align-items: center; justify-content: center; gap: 4px; }
.gs-card.back .dots { display: flex; gap: 3px; } .gs-card.back .dots b { background: var(--pink); }
.gs-card.back small { font-size: .75rem; color: var(--pink-dark); }
.gs-card.back.empty { background: transparent; border-style: dashed; cursor: default; opacity: .6; }
.gs-card.big { width: 84px; flex: none; cursor: default; }
.gs-card.big .band { height: 30px; } .gs-card.big .pts { font-size: 1.2rem; } .gs-card.big .cost .gs-pip { width: 18px; height: 18px; font-size: min(.78rem, 13px); }

/* 보석 더미 — 여섯 무더기 */
.gs-bank { display: flex; justify-content: center; gap: 6px; }
.gs-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 4px; border-radius: 12px; border: 2px solid transparent; background: var(--card); font: inherit; color: inherit; width: min(48px, 13.5vw); flex: none; cursor: pointer; transition: transform .1s; }
.gs-chip .gs-gem { width: 24px; height: 24px; }
.gs-chip .n { font-family: var(--font-display); font-size: .95rem; line-height: 1; }
.gs-chip:disabled { opacity: .4; cursor: default; }
.gs-chip.dim { opacity: .45; }
.gs-chip.on { border-color: var(--pink); background: var(--pink-soft); transform: translateY(-3px); }
.gs-chip.gold { background: #FFF8E4; }

/* 담은 보석 줄 */
.gs-pickbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--pink-soft); border-radius: var(--radius-sm); font-size: .88rem; flex-wrap: wrap; justify-content: center; }
.gs-pickbar .picked { display: inline-flex; gap: 3px; }

/* 나 */

/* 판(사기·예약·반납·귀족) — 아래에서 올라오는 시트. 배경을 누르면 닫히지만 반납·귀족 판은 서버 상태라 다시 뜬다 */
.gs-sheet-back { position: fixed; inset: 0; background: rgba(74,59,68,.35); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.gs-sheet-back[hidden] { display: none; }
.gs-sheet { background: var(--card); border-radius: 22px 22px 0 0; padding: 16px 16px calc(16px + var(--safe-bottom)); width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 12px; animation: gs-up .18s ease-out; max-height: 88vh; max-height: 88dvh; overflow-y: auto; }
@keyframes gs-up { from { transform: translateY(30px); opacity: 0; } }
.gs-sheet .fd { font-family: var(--font-display); font-size: 1rem; font-weight: normal; }
.gs-sheet small { font-size: .78rem; }
.gs-sheet .top { display: flex; gap: 14px; align-items: flex-start; }
.gs-sheet .info { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; font-size: .88rem; }
.gs-sheet .info .line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gs-sheet .lab { display: inline-flex; align-items: center; gap: 4px; min-width: 3.2em; color: var(--muted); font-size: .82rem; }
.gs-sheet .pays { display: flex; flex-direction: column; gap: 6px; }
.gs-sheet .pr { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.gs-sheet .pr .lab { min-width: 5.2em; color: var(--text); }
.gs-sheet .pr b { min-width: 1.4em; text-align: center; font-family: var(--font-display); font-size: 1.05rem; font-weight: normal; }
.gs-sheet .pr small { color: var(--muted); margin-left: auto; }
.gs-sheet .pr.gold { background: #FFF8E4; border-radius: 8px; padding: 4px 6px; }
.gs-sheet .st { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); font-size: 1.2rem; line-height: 1; color: var(--text); cursor: pointer; }
.gs-sheet .st:disabled { opacity: .3; cursor: default; }
.gs-sheet .short { color: var(--red); text-align: center; font-size: .9rem; padding: 6px; background: #FFF0F0; border-radius: 10px; }
.gs-sheet .btns { display: flex; gap: 8px; }
.gs-sheet .btns .btn { flex: 1; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
@media (min-width: 560px) { .gs-market { max-width: 480px; margin: 0 auto; width: 100%; } }

/* ── 보석상 가로 배치 (폰을 눕혔을 때) — 왼쪽 상대 · 가운데 판 · 보석 더미 세로 한 줄 · 오른쪽 나.
   세로 배치는 그대로 두고 이 안에서만 자리를 바꾼다. 높이는 gemshop.js 의 fitHeight 가 화면 끝까지 맞춘다 ── */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  body[data-game="gemshop"] #app, body[data-game="gemshop"] #tut .tut-app { max-width: none; }
  body[data-game="gemshop"] .room.in-game .stage { padding-top: 2px; padding-bottom: 0; }
  .gs.wide { display: grid; gap: 5px 8px; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
    grid-template-columns: minmax(150px, 22%) minmax(0, 1fr) 50px minmax(150px, 22%);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "turn turn turn turn" "foe nobles bank me" "foe market bank me" "foe market bank pick"; }
  .gs.wide > .turn-banner { grid-area: turn; padding: 0 10px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
  .gs.wide > .gs-foe { grid-area: foe; }
  .gs.wide > .gs-me { grid-area: me; }
  .gs.wide > .gs-nobles { grid-area: nobles; gap: 6px; }
  .gs.wide > .gs-market { grid-area: market; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 4px; min-height: 0; max-width: none; margin: 0; }
  .gs.wide > .gs-bank { grid-area: bank; flex-direction: column; justify-content: center; gap: 4px; }
  .gs.wide > .gs-pickbar { grid-area: pick; justify-content: flex-start; gap: 4px; padding: 5px 6px; }
  .gs.wide > .gs-pickbar .btn { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; }
  .gs.wide > .gs-pickbar > span.muted { flex: 1 1 100%; font-size: .8rem; }
  /* 상대가 방금 한 일은 상대 칸 맨 아래에 얹는다 (칸이 판 높이를 끝까지 쓰게) */
  .gs.wide > #gs-hint { grid-row: 4; grid-column: 1; z-index: 1; font-size: .75rem; text-align: left; align-self: end; padding: 0 8px 6px; }
  .gs.wide .gs-foe, .gs.wide .gs-me { padding: 6px 8px; gap: 4px; overflow: hidden; }
  .gs.wide .who { display: flex; align-items: baseline; gap: 6px; }
  .gs.wide .who .nm { flex: 1; max-width: none; }
  .gs.wide .who .score { font-size: 1.35rem; line-height: 1; }
  .gs.wide .tally { margin-left: 0; font-size: .75rem; }
  /* 가로: 같은 칩을 두 줄로 세워 넣는다 (칸이 좁아 가로로 늘어놓을 수 없다) */
  .gs.wide .power { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .gs.wide .pw { flex-direction: row; align-items: center; justify-content: center; padding: 2px 5px; gap: 3px; border-radius: 10px; }
  .gs.wide .pw .parts { align-items: flex-start; }
  .gs.wide .pw .sum { font-size: min(1rem, 16px); }
  .gs.wide .pw .parts { font-size: .75rem; }
  .gs.wide .gs-gem.lg { width: 15px; height: 15px; }
  .gs.wide .gs-cardschip { font-size: .75rem; padding: 2px 10px; min-height: 36px; }
  .gs.wide .lab { font-size: .75rem; color: var(--muted); }
  .gs.wide .res { flex-wrap: wrap; gap: 4px; }
  .gs.wide .res .lab { width: 100%; }
  .gs.wide .gs-card.mini { width: 38px; }
  /* 판: 카드는 칸 높이를 따른다 (가로는 높이가 모자라서 5:7 비율을 고집하면 넘친다) */
  .gs.wide .gs-market .gs-card:not(.mini) { aspect-ratio: auto; height: 100%; }
  .gs.wide .gs-market .gs-card .band { height: 20px; }
  .gs.wide .gs-market .gs-card .pts { font-size: .85rem; }
  .gs.wide .gs-market .gs-card .tier { display: none; }
  .gs.wide .gs-noble { width: 58px; height: 36px; }
  .gs.wide .gs-noble .req { margin-top: 8px; }
  .gs.wide .gs-chip { width: 100%; padding: 3px 0 2px; }
  .gs.wide .gs-chip .gs-gem { width: 20px; height: 20px; }
  .gs.wide .gs-chip.on { transform: translateX(-3px); }
  /* 판(사기·예약·반납·귀족): 아래에서 올라오면 화면을 다 가리니 오른쪽에서 나온다 */
  body[data-game="gemshop"] .gs-sheet-back { align-items: stretch; justify-content: flex-end; }
  body[data-game="gemshop"] .gs-sheet { width: 340px; max-width: 60vw; max-height: none; height: 100%; border-radius: 22px 0 0 22px; gap: 8px;
    padding: calc(10px + var(--safe-top)) calc(14px + env(safe-area-inset-right, 0px)) calc(10px + var(--safe-bottom)) 14px; animation: gs-left .18s ease-out; }
  body[data-game="gemshop"] .gs-sheet .gs-card.big { width: 60px; }
  body[data-game="gemshop"] .gs-sheet .gs-card.big .band { height: 22px; }
  body[data-game="gemshop"] .gs-sheet .st { width: 36px; height: 36px; }
  body[data-game="gemshop"] .gs-sheet .pays { gap: 3px; }
  body[data-game="gemshop"] .gs-sheet .btns { margin-top: auto; }
  body[data-game="gemshop"] .gs-nobles.pick { margin: 4px 0; flex-wrap: wrap; }
}
/* 작은 폰을 눕혔을 때(높이 360 이하, 568×320 등): 옆 칸을 좁히고 설명 글을 덜어낸다 */
@media (orientation: landscape) and (max-height: 360px) and (pointer: coarse) {
  .gs.wide { gap: 3px 6px; grid-template-columns: minmax(118px, 21%) minmax(0, 1fr) 38px minmax(118px, 21%); }
  .gs.wide > .turn-banner { height: 30px; font-size: .8rem; }
  .gs.wide .gs-foe, .gs.wide .gs-me { padding: 4px 6px; gap: 3px; }
  .gs.wide .who .score { font-size: 1.1rem; }
  .gs.wide .tally { white-space: normal; line-height: 1.25; }
  .gs.wide .lab:not(.res .lab) { display: none; }
  .gs.wide .res .lab { display: none; }   /* 예약 카드 셋이 한 줄에 들어가게 — 개수는 카드로 보인다 */
  .gs.wide .res { flex-wrap: nowrap; gap: 3px; }
  .gs.wide .power { gap: 2px; } .gs.wide .pw { padding: 1px 5px 1px 3px; }
  .gs.wide .gs-gem.lg { width: 13px; height: 13px; }
  /* 작은 폰: 예약 카드는 띠(점수·색)만 — 가격까지 넣으면 잘리거나 칸 밖으로 밀려 셋째 장이 안 보인다.
     내 예약은 누르면 사기 판에서 가격이 다 보인다 */
  .gs.wide .gs-card.mini { width: 34px; flex: none; aspect-ratio: auto; } .gs.wide .gs-card.mini .band { height: 18px; }
  .gs.wide .gs-card.mini .cost { display: none; } .gs.wide .gs-card.back.mini { height: 20px; }
  .gs.wide .gs-bank { gap: 2px; } .gs.wide .gs-chip { padding: 1px 0; gap: 0; border-radius: 8px; }
  .gs.wide .gs-chip .gs-gem { width: 15px; height: 15px; } .gs.wide .gs-chip .n { font-size: .75rem; }
  .gs.wide > .gs-pickbar { font-size: .75rem; padding: 3px 5px; gap: 2px; }
  .gs.wide .gs-market { gap: 3px; } .gs.wide .gs-market .gs-card .band { height: 16px; padding: 0 3px; }
  .gs.wide .gs-market .gs-card .pts { font-size: .75rem; } .gs.wide .gs-market .gs-card .band .gs-gem { width: 11px; height: 11px; }
  .gs.wide .gs-market .gs-card .cost { gap: 1px; padding: 2px; } .gs.wide .gs-market .gs-card .cost .gs-pip { width: 15px; height: 15px; font-size: .75rem; }
  .gs.wide .gs-noble { width: 46px; height: 30px; } .gs.wide .gs-noble .pts { font-size: .75rem; } .gs.wide .gs-noble .face { display: none; }
  .gs.wide .gs-noble .req { margin-top: 6px; gap: 2px; } .gs.wide .gs-noble .blk { width: 14px; height: 14px; font-size: .75rem; }
  .gs.wide > #gs-hint { font-size: .75rem; }
}
@keyframes gs-left { from { transform: translateX(30px); opacity: 0; } }

/* 가로 배치 굳히기 (2026-09-22 극단 검증에서 나온 것)
   - 떠다니는 하트는 오른쪽 가장자리에 반(23px) 걸친다 → 오른쪽 칸이 그만큼 비켜야 황금 칸이 안 가려진다
   - 가로는 높이가 390px 로 정해져 있어서, 기기 글자 크기를 키우면(22px) 옆 칸·보석 더미가 넘친다 →
     가로에서만 글자를 px 상한으로 묶는다(min(rem, px)). 세로는 글자 크기를 그대로 따른다
   - 그래도 넘치면 잘리지 말고 칸 안에서 스크롤 */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .gs.wide { padding-right: max(16px, env(safe-area-inset-right, 0px)); font-size: min(1rem, 16px); }
  .gs.wide > #gs-hint { display: none; }
  .gs.wide .gs-said.in-col { margin-top: auto; font-size: min(.75rem, 12px); line-height: 1.3; }
  .gs.wide .gs-said.in-col .mv .lab { font-size: .75rem; }
  .gs.wide .gs-said.in-col .gs-card.mini { width: 34px; }
  .gs.wide .gs-noble.mini { width: 34px; height: 23px; }
  .gs.wide .gs-gem.big { width: 16px; height: 16px; }
  .gs.wide .gs-foe, .gs.wide .gs-me { overflow-y: auto; overscroll-behavior: contain; font-size: min(.88rem, 14px); }
  .gs.wide .who .nm { font-size: min(1rem, 16px); }
  .gs.wide .who .score { font-size: min(1.35rem, 22px); }
  .gs.wide .who .score small { font-size: min(.75rem, 12px); }
  .gs.wide .tally { font-size: min(.75rem, 12px); white-space: normal; line-height: 1.3; }
  .gs.wide .lab { font-size: min(.75rem, 12px); }
  .gs.wide .col .k { font-size: min(.85rem, 14px); min-height: min(.85rem, 14px); }
  .gs.wide .col .t { font-size: min(.75rem, 12px); }
  .gs.wide > .turn-banner { font-size: min(.9rem, 15px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .gs.wide .gs-nobles .muted { font-size: min(.85rem, 14px); }
  /* 보석 더미: 여섯 칸이 칸 높이를 나눠 쓴다 (넘치지 않게) */
  .gs.wide > .gs-bank { min-height: 0; justify-content: stretch; }
  .gs.wide .gs-chip { flex: 1 1 0; min-height: 0; max-height: 58px; justify-content: center; gap: 0; overflow: hidden; }
  .gs.wide .gs-chip .gs-gem { width: 17px; height: 17px; }   /* 판이 끝나 아래 바가 생기면 칸이 38px 까지 줄어든다 */
  .gs.wide .gs-chip .n { font-size: min(.95rem, 15px); }
  /* 담은 보석 줄: 버튼 둘이 좁으면 두 줄로 */
  .gs.wide > .gs-pickbar { font-size: min(.8rem, 13px); }
  .gs.wide > .gs-pickbar > span.muted { font-size: min(.8rem, 13px); }
  .gs.wide > .gs-pickbar .btn { flex: 1 1 64px; font-size: min(.85rem, 14px); white-space: nowrap; }
  /* 판 카드·귀족 글자 */
  .gs.wide .gs-market .gs-card .pts { font-size: min(.85rem, 14px); }
  .gs.wide .gs-market .gs-card .cost .gs-pip { font-size: min(.75rem, 12px); }
  .gs.wide .gs-market .lv { font-size: min(.75rem, 12px); }
  .gs.wide .gs-market .gs-card.back small { font-size: min(.75rem, 12px); }
  .gs.wide .gs-noble .blk { font-size: min(.75rem, 12px); }
  .gs.wide .gs-noble .pts { font-size: min(.82rem, 13px); }
  .gs.wide .gs-card.mini .pts { font-size: min(.78rem, 12.5px); }
  .gs.wide .gs-card.mini .cost .gs-pip { width: 14px; height: 14px; font-size: min(.75rem, 12px); }
  /* 판(시트) 글자도 가로에선 묶는다 — 높이가 390 이라 22px 글자면 버튼이 화면 밖으로 밀린다 */
  body[data-game="gemshop"] .gs-sheet { font-size: min(1rem, 16px); overflow-y: auto; }
  /* 판이 끝나면 뜨는 아래 바를 가로에선 낮게 — 판 칸이 줄어 가격 두 줄이 잘리지 않게 */
  body[data-game="gemshop"] .startbar.endbar { padding-top: 6px; padding-bottom: calc(6px + var(--safe-bottom)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
  body[data-game="gemshop"] .startbar.endbar .btn { min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: min(.95rem, 15px); }
  body[data-game="gemshop"] .gs-sheet .fd { font-size: min(1rem, 16px); }
  body[data-game="gemshop"] .gs-sheet .pr, body[data-game="gemshop"] .gs-sheet .info { font-size: min(.88rem, 14px); }
  body[data-game="gemshop"] .gs-sheet .pr b { font-size: min(1.05rem, 17px); }
  body[data-game="gemshop"] .gs-sheet small, body[data-game="gemshop"] .gs-sheet .lab { font-size: min(.78rem, 12.5px); }
  body[data-game="gemshop"] .gs-sheet .short { font-size: min(.9rem, 14px); }
  body[data-game="gemshop"] .gs-sheet .btn { font-size: min(1rem, 16px); }
  body[data-game="gemshop"] .gs-sheet .gs-pip { font-size: min(.78rem, 12.5px); }
}
@media (orientation: landscape) and (max-height: 360px) and (pointer: coarse) {
  .gs.wide { padding-right: max(14px, env(safe-area-inset-right, 0px)); }
  .gs.wide .gs-chip .n { font-size: min(.75rem, 12px); }
  .gs.wide .gs-market .gs-card .cost .gs-pip { font-size: min(.75rem, 12px); }
  .gs.wide > .turn-banner { font-size: min(.8rem, 13px); }
}

/* ── 도망자 ── */
.fg { display: flex; flex-direction: column; gap: 8px; }
.fg .row { display: flex; gap: 8px; }
.fg .small { font-size: .82rem; }
.fg-foot { vertical-align: -2px; flex: none; }
.fg-foot.one { width: .58rem; height: .8rem; }
.fg-foot.two { width: 1rem; height: 1rem; }
.fg-ft { display: inline-flex; align-items: center; gap: 1px; color: var(--muted); font-family: var(--font-display); font-size: .78rem; }
.fg-ft b { font-weight: normal; margin-left: 2px; }
.fg-pill { position: absolute; left: 50%; transform: translateX(-50%); bottom: -9px; background: var(--pink); color: #fff; font-size: .75rem; line-height: 1; padding: 3px 7px; border-radius: 999px; font-family: var(--font-display); white-space: nowrap; box-shadow: 0 1px 0 var(--pink-dark); z-index: 1; }
/* 역할 줄 */
.fg-roles { display: flex; justify-content: space-between; gap: 8px; background: var(--card); border-radius: var(--radius-sm); padding: 6px 10px; font-size: .85rem; }
.fg-roles .p { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.fg-roles .p b { font-family: var(--font-display); font-weight: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 6em; }
.fg-roles .p small { color: var(--muted); white-space: nowrap; }
.fg-roles .p.me b { color: var(--pink-dark); }
.fg .tag { font-style: normal; font-size: .75rem; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.fg .tag.f { background: var(--pink-soft); color: var(--pink-dark); }
.fg .tag.m { background: var(--blue-soft); color: var(--blue-dark); }
/* 판: 더미 + 줄 */
.fg-board { background: var(--card); border-radius: var(--radius-sm); padding: 8px 8px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 6px; }
.fg-piles { display: flex; justify-content: center; gap: 8px; }
.fg-pile { width: 78px; height: 46px; border-radius: 10px; background: repeating-linear-gradient(135deg, #FFE1EA 0 6px, var(--tint) 6px 12px); border: 2px solid #F6C6D3; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; font: inherit; color: inherit; padding: 0; cursor: default; }
.fg-pile b { font-family: var(--font-display); font-weight: normal; font-size: .82rem; color: var(--pink-dark); }
.fg-pile small { font-size: .75rem; color: var(--muted); }
.fg-pile.on:not(:disabled) { outline: 3px solid var(--pink); outline-offset: 1px; cursor: pointer; animation: fg-breathe 1.4s ease-in-out infinite; }
.fg-pile.empty { opacity: .4; }
@keyframes fg-breathe { 50% { outline-color: #FFC9D7; } }
@media (prefers-reduced-motion: reduce) { .fg-pile.on:not(:disabled) { animation: none; } }
.fg-rowlab, .fg-lab { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: .75rem; flex-wrap: wrap; color: var(--muted); padding: 2px 2px 0; }
.fg-lab .legend { display: inline-flex; align-items: center; gap: 4px; }
.fg-lab .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--line); vertical-align: -1px; }
.fg-lab .sw.rev { background: var(--blue); border-color: var(--blue-dark); } .fg-lab .sw.hand { background: #EDE7EA; } .fg-lab .sw.miss { background: var(--card); border-style: dashed; border-color: var(--faint); }
.fg-row { display: grid; grid-template-columns: repeat(auto-fill, 3.25rem); gap: 12px 6px; align-items: start; padding: 2px 0 8px; }   /* 좌우 여백 0 — 손패 칸과 세로줄(가운데)이 맞게 */
.fg-slot { position: relative; width: 3.25rem; min-height: calc(3.75rem + 10px); display: flex; flex-direction: column; align-items: center; }   /* 질주 알약이 걸칠 자리도 미리 — 알약이 생겨도 줄 높이가 안 바뀐다 */   /* 칸은 늘 같은 폭 (rem — 기기 글자를 키우면 같이 커진다) */
.fg-h { width: 3rem; height: 3.75rem; border-radius: 7px; background: var(--card); border: 2px solid var(--line); box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 3px 4px; }
.fg-h .n { font-family: var(--font-display); font-size: 1rem; line-height: 1; }
.fg-h small { font-size: .75rem; color: var(--muted); } .fg-h small.gold { color: var(--amber-text); }
.fg-h .fg-ft { align-self: flex-end; font-size: .75rem; } .fg-h .fg-foot.one { width: .5rem; height: .68rem; } .fg-h .fg-foot.two { width: .85rem; height: .85rem; }
.fg-h.start { background: #F6F1F4; border-color: var(--faint); }
.fg-h.back { background: repeating-linear-gradient(135deg, #FFD9E4 0 5px, #FFEDF2 5px 10px); border-color: #F3B9CA; }
.fg-h.back.mine { background: repeating-linear-gradient(135deg, #FFE1EA 0 5px, var(--tint) 5px 10px); }
.fg-h.back.mine .n { color: var(--pink-dark); }
.fg-h.rev { border-color: var(--blue); }
.fg-h.esc { background: var(--yellow-soft); border-color: var(--yellow); }
.fg-h.last { outline: 3px solid var(--pink); outline-offset: 1px; }
/* 손패 */
.fg-tools { display: flex; flex-direction: column; gap: 8px; }
.fg-hand, .fg-pad { background: var(--card); border-radius: var(--radius-sm); padding: 8px 16px 10px 8px; box-shadow: 0 4px 14px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 6px; }
.fg-cards { display: flex; flex-wrap: wrap; gap: 8px 6px; padding: 2px 0 6px; }
.fg-c { width: 3.25rem; height: 4.25rem; border-radius: 8px; background: var(--card); border: 2px solid var(--line); box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 4px 5px; position: relative; cursor: default; }
.fg-c .n { font-family: var(--font-display); font-size: 1.1rem; line-height: 1; }
.fg-c small.gold { font-size: .75rem; color: var(--amber-text); }
.fg-c .fg-ft { align-self: flex-end; }
.fg-c .need { align-self: stretch; text-align: center; font-family: var(--font-display); font-size: .75rem; line-height: 1.2; color: #fff; background: var(--pink); border-radius: 6px; padding: 1px 0; }
.fg-c .need.temp { background: #F2C766; color: var(--amber-text); }
.fg-rowkey { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); padding: 0 2px; }
.fg-rowkey .fg-pill { position: static; transform: none; }
.fg-rowkey:empty { display: none; }
/* 좁은 폰에선 차례 안내가 두 줄이 되기도 한다 — 늘 두 줄 높이로 잡아 차례마다 화면이 들썩이지 않게 */
@media (max-width: 360px) { .fg .turn-banner { min-height: calc(2.8em + 20px); display: flex; align-items: center; justify-content: center; } }
.fg-c.can { border-color: var(--pink); box-shadow: 0 0 0 2px rgba(255,143,171,.3); cursor: pointer; }
.fg-c.dim { opacity: .4; }
.fg-c.esc { background: var(--yellow-soft); border-color: var(--yellow); }
.fg-c.pick { border-color: var(--blue-dark); background: var(--blue-soft); transform: translateY(-3px); }
.fg-cards.small .fg-c { cursor: default; }
/* 숫자판 */
.fg-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.fg-k { height: 38px; min-width: 36px; border-radius: 8px; background: var(--tint); border: 1.5px solid var(--line); font: inherit; font-family: var(--font-display); font-size: .9rem; color: var(--text); padding: 0; cursor: pointer; }
.fg-k:disabled { cursor: default; }
.fg-k.rev { background: var(--blue); border-color: var(--blue-dark); color: #fff; }
.fg-k.hand { background: #EDE7EA; color: #A89BA2; border-color: var(--faint); }
.fg-k.miss { color: var(--faint); border-style: dashed; border-color: var(--faint); background: var(--card); }
.fg-k.on { background: var(--pink); color: #fff; border-color: var(--pink-dark); }
/* 기록 */
.fg-roles .p small, .fg-rowlab small, .fg-lab small { font-size: .75rem; }   /* 작은 글자도 12px 은 지킨다 */
.fg-log { background: var(--card); border-radius: var(--radius-sm); padding: 6px 10px; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.fg-log b { color: var(--text); font-weight: normal; }
.fg-log .hit { color: var(--blue-dark); } .fg-log .miss { color: var(--pink-dark); }
.fg .btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.turn-banner.hunt { background: var(--yellow-soft); color: var(--amber-text); }
/* 놓기 판 */
.fg-sheet-back { position: fixed; inset: 0; background: rgba(74,59,68,.35); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.fg-sheet-back[hidden] { display: none; }
.fg-sheet { background: var(--card); border-radius: 22px 22px 0 0; padding: 16px 16px calc(16px + var(--safe-bottom)); width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 10px; animation: gs-up .18s ease-out; max-height: 88vh; max-height: 88dvh; overflow-y: auto; }
.fg-sheet .fd { font-family: var(--font-display); font-size: 1.05rem; font-weight: normal; }
.fg-sheet .calc { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-display); font-size: .95rem; background: var(--pink-soft); border-radius: 12px; padding: 8px; }
.fg-sheet .calc b { font-weight: normal; color: var(--pink-dark); font-size: 1.15rem; }
.fg-sheet .calc b.bad { color: var(--red); }
.fg-sheet .calc.soft { background: var(--tint); }
.fg-sheet .calc .arrow { color: var(--muted); }
.fg-sheet p { margin: 0; line-height: 1.5; }
.fg-sheet .btns .btn { flex: 1; }

/* ── 도망자 스킬 ── */
.fg-roles .p { flex-wrap: wrap; }                 /* 스킬 알약은 닉네임을 밀지 않고 다음 줄로 */
.fg-roles .p b { flex-shrink: 0; }
.fg-roles .fg-skmini { font-style: normal; font-size: .75rem; padding: 1px 6px; border-radius: 999px; background: var(--yellow-soft); color: var(--amber-text); white-space: nowrap; }
.fg-roles .fg-skmini.used { opacity: .45; text-decoration: line-through; }
.fg-series { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; font-size: .75rem; color: var(--muted); }
.fg-series small { white-space: nowrap; font-size: 1em; }   /* 이미 12px — small 이 한 번 더 줄여 10px 였다 */
.fg-series b { font-family: var(--font-display); font-weight: normal; font-size: 1rem; color: var(--text); }
.fg-marks { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.fg-marks .mk { font-size: .75rem; padding: 3px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); }
.fg-marks .mk b { font-weight: 700; }
.fg-marks:empty { display: none; }
/* 줄 표시(가장 가까움·범위·3의 배수…)는 카드 밑에 흐름대로 쌓는다 — 겹쳐 놓으면 다음 줄 카드를 덮는다 */
.fg-slot .fg-pill { position: static; transform: none; margin-top: -9px; max-width: 100%; }   /* 질주 알약은 카드 아랫단에 걸친다 — 칸 폭 안에서 */
.fg-tags { margin-top: 3px; display: flex; flex-direction: column; gap: 2px; align-items: center; width: 100%; }
.fg-tags span { font-size: .75rem; line-height: 1.15; padding: 2px 4px; border-radius: 8px; background: var(--blue-soft); color: var(--blue-dark); text-align: center; max-width: 100%; box-sizing: border-box; }   /* 길면 칸 폭 안에서 줄바꿈 (칸을 넓히지 않는다) */
.fg-slot.targetable .fg-h { cursor: pointer; outline: 3px dashed var(--pink); outline-offset: 1px; }
.fg-h.stop { background: repeating-linear-gradient(135deg, #EDE7EA 0 5px, #F8F4F6 5px 10px); border-color: var(--faint); }
.fg-h small.safe { color: var(--mint-dark); }
.fg-c.temp { border-style: dashed; border-color: #D9A62E; background: #FFF8E4; }
.fg-cards.dimall .fg-c:not(.pick) { opacity: .4; }
.pinkt { color: var(--pink-dark); font-weight: 700; }
/* 내 스킬 줄 */
.fg-skills { background: var(--card); border-radius: var(--radius-sm); padding: 8px 8px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 6px; }
.fg-skills[hidden] { display: none; }
.fg-skrow { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-sk { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; border: 2px solid #F3D3A8; background: linear-gradient(160deg, #FFF3D1, #FFE9B8); cursor: pointer; min-width: 120px; }
.fg-sk b { font-family: var(--font-display); font-weight: normal; font-size: .95rem; }
.fg-sk small { font-size: .75rem; color: var(--amber-text); }
.fg-sk.m { border-color: #BFD8F0; background: linear-gradient(160deg, #E1F0FB, #D0E6F8); } .fg-sk.m small { color: var(--blue-dark); }
.fg-sk.on { outline: 3px solid var(--pink); outline-offset: 1px; }
.fg-sk.used { opacity: .5; filter: grayscale(.6); }
/* 판(시트) 안 */
.fg-skhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fg-skside { font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: var(--pink-soft); color: var(--pink-dark); }
.fg-skside.m { background: var(--blue-soft); color: var(--blue-dark); }
.fg-skpicks { display: flex; flex-direction: column; gap: 8px; }
.fg-skpick { border: 2px solid #F3D3A8; background: linear-gradient(160deg, #FFF3D1, #FFE9B8); border-radius: 14px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.fg-skpick b { font-family: var(--font-display); font-weight: normal; font-size: 1.05rem; }
.fg-skpick em { font-style: normal; font-size: .75rem; color: var(--amber-text); }
.fg-skpick p { margin: 0; font-size: .88rem; line-height: 1.5; }
.fg-skpick.on { outline: 3px solid var(--pink); outline-offset: 1px; }
.fg-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-opt { font: inherit; font-family: var(--font-display); font-size: .9rem; color: var(--text); background: var(--tint); border: 2px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; }
.fg-opt small { font-family: var(--font-body); font-size: .75rem; color: var(--muted); }
.fg-opt.on { background: var(--pink-soft); border-color: var(--pink); color: var(--pink-dark); }
.fg-sheet .fg-piles .fg-pile { cursor: pointer; }
.fg-sheet .fg-piles .fg-pile.on { outline: 3px solid var(--pink); outline-offset: 1px; }
.fg-sheet .fg-grid .fg-k { cursor: pointer; }

/* · 없이 나눈 글 조각들 (2026-09-23 사용자: "· 로 이으면 화면마다 어울리지 않게 개행된다") */
.gs-sheet .short { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.gs-sheet .short .miss { font-size: .85rem; padding: 2px 10px; border-radius: 999px; background: #FDE3E3; color: var(--red); white-space: nowrap; }
.gs-sheet .short .lab { font-size: .85rem; color: var(--muted); }
.fg-sheet .btn:has(.sub) { flex-direction: column; gap: 0; line-height: 1.15; }
.fg-sheet .btn .sub { display: block; font-size: .75rem; opacity: .85; }
.fg-nums { display: flex; flex-wrap: wrap; gap: 5px; }
.fg-nums span { font-family: var(--font-display); font-size: .9rem; min-width: 30px; text-align: center; padding: 2px 8px; border-radius: 8px; background: var(--blue-soft); color: var(--blue-dark); }
.turn-banner.two { min-height: calc(2.8em + 20px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.turn-banner .ls { display: block; font-size: .8rem; line-height: 1.3; opacity: .8; }
.turn-banner .ls:empty { display: none; }

/* NW.seps — 조각마다 따로, 같은 줄일 때만 사이에 · (줄 첫 조각 .ls 앞엔 없음). 줄이 바뀌면 조각째 넘어간다 */
.seps { display: inline-flex; flex-wrap: wrap; column-gap: .9em; row-gap: .15em; max-width: 100%; }
.seps.c { display: flex; justify-content: center; }
.seps > .sp { position: relative; }
.seps > .sp::before { content: "·"; position: absolute; left: -.6em; opacity: .55; }
.seps > .sp:first-child::before, .seps > .sp.ls::before { content: none; }

/* 내 차례가 오면: 가장자리 분홍 반짝(#turn-glow) · 차례 안내가 화면 밖이면 위에 알약(#turn-pill) — app.js turnArrived/updateTurnCue */
#turn-glow { position: fixed; inset: 0; pointer-events: none; z-index: 12; opacity: 0; box-shadow: inset 0 0 0 4px var(--pink), inset 0 0 40px 10px rgba(255,143,171,.5); }
#turn-pill { position: fixed; top: calc(var(--safe-top, 0px) + 10px); left: 50%; transform: translateX(-50%); z-index: 13; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--pink); color: #fff; font: inherit; font-family: var(--font-display); font-size: 1rem; box-shadow: 0 6px 18px rgba(232,106,140,.38), 0 3px 0 var(--pink-dark); cursor: pointer; animation: pill-in .22s ease-out; }
#turn-pill[hidden] { display: none; }
#turn-pill::before { content: ""; width: 8px; height: 8px; border-left: 2.5px solid #fff; border-top: 2.5px solid #fff; transform: translateY(2px) rotate(45deg); }
@keyframes pill-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { #turn-pill { animation: none; } }
/* 고른 게임 설명·옵션 — 카드 줄 바로 아래에 한 줄을 다 차지 */
.pick-panel { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.pick-panel .pick-info { box-shadow: 0 0 0 2px var(--pink-soft), 0 2px 8px rgba(0,0,0,.05); }
.fg-rowkey.off { visibility: hidden; }
/* 사람 색 — 구룡투 점수·쿼리도 남은 벽도 위 이름 줄과 같은 분홍·파랑 */
.gr-score .p.c-blue .n { color: var(--blue-dark); }
.qd-score .qd-chip.c-blue ~ .qd-w { color: var(--blue-dark); }
.qd-score .qd-chip.c-pink ~ .qd-w { color: var(--pink-dark); }
.toast { word-break: keep-all; }
.toast:has(.ls:not(:first-child)) { border-radius: 18px; }   /* 두 줄이면 알약 대신 둥근 네모 */
/* 대기실 위 아이콘 이름 — 봉투·책만으론 뭔지 몰랐다. 게임 중엔 한 줄(56px)을 지키려고 숨긴다 */
.iconbtn .iblab { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: .75rem; line-height: 1; color: var(--muted); white-space: nowrap; pointer-events: none; }
.room:not(.in-game) .topbar { padding-bottom: 24px; }
.room.in-game .iconbtn .iblab, .room.immersive .iconbtn .iblab { display: none; }
.bs-label .muted span.bs-left { letter-spacing: 0; color: var(--muted); font-family: var(--font-body); font-size: .8rem; margin-left: 4px; }
/* 구룡투 뒷면 색 뜻 — 검정 = 짝수, 하양 = 홀수 (판 어디에도 적혀 있지 않았다) */
.gr-key { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: .8rem; color: var(--muted); }
.gr-key .gr-tile { width: 18px; height: 24px; font-size: .75rem; border-radius: 5px; box-shadow: none; pointer-events: none; }
.gr-key .gr-tile.white { margin-left: 10px; }
/* 게임 카드 아래 줄 — 난이도·한 판 길이. 이름 줄 폭을 그대로 쓰고, 좁은 폰에선 이름이 먼저 */
.game-card .txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.game-card .ginfo, .pick-sheet .ginfo { display: flex; gap: 6px; font-size: .72rem; line-height: 1; color: var(--muted); font-family: var(--font-body); }
.game-card .ginfo i, .pick-sheet .ginfo i { font-style: normal; padding: 2px 6px; border-radius: 999px; background: var(--tint); }
.game-card .ginfo i.d1, .pick-sheet .ginfo i.d1 { background: var(--mint-soft); color: var(--mint-dark); }
.game-card .ginfo i.d2, .pick-sheet .ginfo i.d2 { background: var(--yellow-soft); color: var(--amber-text); }
.game-card .ginfo i.d3, .pick-sheet .ginfo i.d3 { background: var(--pink-soft); color: var(--pink-dark); }
.game-card.recent .ginfo { display: none; }   /* 최근 한 게임 카드는 작아서 날짜만 */
/* 판 위 반응(이모트) — 얼굴을 누르면 여섯 개가 뜨고, 고르면 얼굴 위로 떠올랐다 사라진다 */
.players { position: relative; }
.avatar:not(.empty) .face { cursor: pointer; }
.emote-bar { position: absolute; left: 50%; bottom: calc(100% - 4px); transform: translateX(-50%); display: flex; gap: 6px; background: var(--card); border-radius: 999px; padding: 6px 8px; box-shadow: 0 6px 20px rgba(74,59,68,.18); z-index: 12; animation: pill-in .18s ease-out; }
.emote-bar button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--tint); display: grid; place-items: center; padding: 0; }
.emote-bar button:active { transform: scale(.9); background: var(--pink-soft); }
.emote-bar .uicon { width: 26px; height: 26px; }
.emote-fly { position: absolute; left: 50%; top: -2px; width: 36px; height: 36px; transform: translateX(-50%); pointer-events: none; z-index: 11; filter: drop-shadow(0 3px 6px rgba(74,59,68,.2)); }
.emote-fly.drop { position: fixed; width: 56px; height: 56px; z-index: 40; filter: drop-shadow(0 4px 10px rgba(74,59,68,.3)); }   /* 게임 중: 얼굴 아래로 크게 (위로 띄우면 화면 밖이라 잘렸다) */
.emote-fly.face-swap { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; padding: 12%; box-sizing: border-box; border-radius: 50%; background: var(--card); object-fit: contain; z-index: 2; filter: none; }   /* 얼굴이 2초 동안 반응 그림으로 바뀐다 */
@media (max-width: 360px) { .emote-bar { gap: 4px; padding: 5px 6px; } .emote-bar button { width: 36px; height: 36px; } }
.room.in-game .emote-bar { bottom: auto; top: calc(100% - 2px); }   /* 게임 중엔 얼굴 줄이 위에 붙어 있어 아래로 펼친다 */
/* 이정표 축하 — 첫 승·첫 클리어·3연승부터. 결과 창 제목 아래 한 줄 + 색종이 */
.result .cheer { display: inline-flex; align-items: center; margin: 6px auto 0; padding: 4px 12px; border-radius: 999px; background: var(--yellow-soft); color: var(--amber-text); font-family: var(--font-display); font-size: .95rem; animation: pill-in .3s ease-out; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.confetti i { position: absolute; top: -14px; width: 10px; height: 14px; opacity: .95; animation: confetti-fall 2s ease-in forwards; }
@keyframes confetti-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(540deg); opacity: .6; } }
/* 대기실 "우리" 줄 — D+n · 이번 주 승부 · 연속 · 이번 판 내기. 조각은 알약, 줄이 좁으면 조각째 접힌다 */
.couple-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: -2px 0 2px; }
.couple-line .cl { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; min-height: 30px; border-radius: 999px; background: var(--card); color: var(--text); font-size: .82rem; font-family: var(--font-display); box-shadow: 0 2px 8px rgba(0,0,0,.05); border: 0; }
.couple-line .cl .uicon { width: 16px; height: 16px; }
.couple-line .cl.dday { color: var(--pink-dark); }
.couple-line .cl.lead { color: var(--amber-text); background: var(--yellow-soft); }
.couple-line .btn-ish { background: var(--pink-soft); color: var(--pink-dark); cursor: pointer; min-height: 36px; }
.couple-line .cl.stake { background: var(--yellow-soft); color: var(--amber-text); padding-right: 4px; max-width: 100%; }
.couple-line .cl.stake b { font-weight: normal; color: #B8791A; }
.couple-line .cl.stake .x { width: 30px; height: 30px; border: 0; background: none; color: var(--amber-text); display: grid; place-items: center; padding: 0; margin-left: 2px; }
.couple-line .cl.stake .x .close-ic { width: 14px; height: 14px; }
/* 기록 버튼 위 배지 — 아직 안 들어준 소원 수 */
.iconbtn { position: relative; }
.ibadge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pink-dark); color: #fff; font-size: .7rem; font-style: normal; font-family: var(--font-display); display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
/* 얼굴 줄 하트 밑 D+n */
.players .heart { display: flex; flex-direction: column; align-items: center; gap: 0; }
.players .heart .dday { font-size: .7rem; line-height: 1; color: var(--pink-dark); font-family: var(--font-display); margin-top: -2px; }
/* 기록: 사귄 날 칸은 눌러서 적는다 · 우리 배지 */
.rec-summary .stat.since { border: 0; font: inherit; color: inherit; cursor: pointer; }
.rec-summary .stat.since:active { transform: scale(.97); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
.badges .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 6px; border-radius: 999px; background: var(--tint); color: var(--pink-dark); font-size: .78rem; font-family: var(--font-display); opacity: .35; filter: grayscale(1); }
.badges .badge.got { opacity: 1; filter: none; background: var(--yellow-soft); color: var(--amber-text); }
.badges .badge .uicon { width: 16px; height: 16px; }
/* 기록: 이달의 우리 */
.month { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.month-nums { display: flex; gap: 8px; width: 100%; }
.month-nums > div { flex: 1; background: var(--tint); border-radius: 14px; padding: 10px 4px; display: flex; flex-direction: column; gap: 2px; }
.month-nums b { font-family: var(--font-display); font-size: 1.5rem; color: var(--pink-dark); font-weight: normal; }
.month-nums span { font-size: .75rem; color: var(--muted); }
/* 초대 QR — 접혀 있다가 누르면 펼쳐진다. 흰 바탕은 어두운 화면에서도 그대로 (카메라가 읽어야 하니까) */
.qr-toggle { margin-top: 10px; background: none; border: 0; color: var(--pink-dark); font-family: var(--font-display); font-size: .9rem; display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
.qr-box[hidden] { display: none; }
.qr-box svg { border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
/* 상대 끊김 줄 — 30초 뒤 "접어 두고 나중에" 버튼이 붙는다 */
.partner-off .btn { margin-top: 8px; }
/* 도망자·보석상 보완 */
/* 도망자 — 보안관 숫자판 아래, 여러 개를 한꺼번에 불러 틀린 조합 줄 (조각마다 따로, 최근 것이 앞) */
.fg-combos { display: flex; align-items: baseline; gap: 8px; font-size: .8rem; color: var(--muted); padding: 2px 2px 0; }
.fg-combos .lab { flex: none; }
.fg-combos .seps > .sp { font-family: var(--font-display); color: var(--pink-dark); white-space: nowrap; }
/* 보석상 — 담은 줄의 알갱이는 저마다 버튼(누르는 자리 32px), 모서리 × 가 "누르면 빠진다" 를 알려 준다 */
.gs-pickbar .picked { gap: 0; }
.gs-pickbar .gs-pkg { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -6px -1px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.gs-pickbar .gs-pkg:active { background: rgba(255,255,255,.6); }
.gs-pickbar .gs-pkg::after { content: "×"; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--pink-dark); color: #fff; font-size: 10px; line-height: 12px; text-align: center; pointer-events: none; }
/* 야찌·체스·루미루미 보완 */
/* 야찌: 확정 대기 칸이 0점이면 경고 — 안내 줄과 그 칸 모두 */
.yacht .zero, table.score tr.zero th small.hint .zero { color: var(--pink-dark); font-weight: bold; }
table.score tr.pending.zero th, table.score tr.pending.zero td { background: var(--yellow-soft); }
/* 체스: 잡힌 기물 줄 끝의 우세 "+n" */
.ch-taken .ch-adv { align-self: center; margin-left: 4px; font-family: var(--font-display); font-size: .85rem; color: var(--muted); line-height: 22px; }
/* 숫자야구 보완 — 0~9 표시판(있음 O·없음 X·모름), 그 표시가 숫자 키에도 살짝 비친다 */
.bb-marks { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 5px; align-items: center; }
.bb-marks[hidden] { display: none; }
.bb-marks-label { grid-row: 1 / span 2; font-family: var(--font-display); font-size: .75rem; color: var(--muted); padding-right: 4px; }
.bb-mark { height: 36px; min-width: 36px; border-radius: 10px; background: var(--card); border: 1.5px solid var(--line);
  font-family: var(--font-display); font-size: 1rem; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.bb-mark.m-o { background: #E8F6E1; border-color: #8FCC7C; color: #2F7A3E; }
.bb-mark.m-x { background: var(--bg2, #FFF8F4); border-color: transparent; color: #C4B7BD; text-decoration: line-through; }
.bb-pad .key.mk-x:not(:disabled) { opacity: .45; }
.bb-pad .key.mk-o { position: relative; }
.bb-pad .key.mk-o::after { content: ''; position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #5DB84C; }
/* 커넥트4·오셀로·오목 보완 */
/* 커넥트4 마지막 칩 — 떨어지는 애니가 끝나도 하얀 점이 남는다(오목의 마지막 돌 점과 같은 결). 이긴 줄 표시가 있으면 점은 뺀다 */
.c4-cell .chip { display: flex; align-items: center; justify-content: center; }
.c4-cell .chip.last::after { content: ""; width: 30%; height: 30%; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.c4-cell .chip.win::after { content: none; }
/* 오셀로 점수 줄 — 앞선 쪽에 "+n"(사람 색), 이름 말고는 줄어들지 않고 낱말 가운데서 안 끊긴다 */
.oth-score .p { white-space: nowrap; }
.oth-score .p .lead { flex: none; font-size: .8rem; font-weight: 700; color: var(--pink-dark); }
.oth-score .p .lead.c-blue { color: var(--blue-dark); }
/* 스도쿠·지뢰찾기 보완 */
/* 스도쿠 숫자판: 되돌리기 키가 늘어 7칸 두 줄 — 1~5·지우기·메모 / 6~9·되돌리기·확인(2칸) */
.sd-pad { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sd-pad #sd-check { grid-column: span 2; }
.sd-pad .key.undo { color: var(--muted); font-size: 1rem; }
.sd-pad .key.undo:disabled { opacity: .3; box-shadow: 0 4px 0 var(--line); transform: none; cursor: default; }
.sd-pad.memo .key.undo { box-shadow: 0 4px 0 #BCE8D4; }
/* 지뢰찾기 목숨 하트(목숨 모드일 때만 보인다) · 터진 지뢰는 판이 가는 중에도 열린 채 남는다 */
.mines-lives { gap: 2px; padding: 6px 10px; }
.mines-lives .heart { width: 18px; height: 18px; vertical-align: middle; }
.mines-grid .cell.blown { background: #FFC9C9; box-shadow: inset 0 0 0 2px var(--red); }
.mines-grid .cell.blown.boom { background: var(--red); }
/* 숫자 올리기 */
/* 위 정보 줄 → 더미 4개(크게) → 내 손패 7장 → 끝내기. 고른 카드가 들어가는 더미는 초록, 되돌리기 특례(10 차이)면 노랗게 반짝 */
.cu { display: flex; flex-direction: column; gap: 10px; }
.cu-head { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cu-head .chip b { font-weight: 400; }
.cu-piles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cu-pile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 26px 4px 8px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); border: 3px solid transparent; cursor: pointer; user-select: none; transition: transform .12s, border-color .12s, background .12s; }
.cu-pile.up { border-color: var(--blue-soft); }
.cu-pile.down { border-color: var(--pink-soft); }
.cu-pile .cu-dir { font-family: var(--font-display); font-size: 1.2rem; line-height: 1; }
.cu-pile.up .cu-dir { color: var(--blue-dark); }
.cu-pile.down .cu-dir { color: var(--pink-dark); }
.cu-pile .cu-top { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; color: var(--text); }
.cu-pile .cu-count { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.cu-pile.ok { border-color: var(--mint-dark); background: var(--mint-soft); transform: translateY(-3px); }
.cu-pile.back { border-color: var(--yellow); background: var(--yellow-soft); transform: translateY(-3px); animation: cu-twinkle .9s ease-in-out infinite; }
.cu-pile.nope-soft { opacity: .55; }
.cu-pile.flash { animation: cu-land .9s ease-out; }
.cu-pile.flash-back { animation: cu-land-back .9s ease-out; }
.cu-pile.nope { animation: cu-shake .3s; }
@keyframes cu-twinkle { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,209,102,.0); } 50% { box-shadow: 0 0 0 6px rgba(255,209,102,.45); } }
@keyframes cu-land { 0% { background: var(--mint-soft); transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes cu-land-back { 0% { background: var(--yellow-soft); transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes cu-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* "여기 놓지 마!" 손: 내 것은 더미 아래 작은 버튼(켜지면 빨강), 상대 것은 더미 위 배지(상대 색) */
.cu-stop { margin-top: 6px; width: 44px; height: 36px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.cu-stop.on { background: #FFD9D9; border-color: var(--red); color: #D14848; }
.cu-stop:disabled { opacity: .4; cursor: default; }
.cu-hand-ic { width: 18px; height: 18px; }
.cu-foe-stop { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px; border-radius: 999px; background: var(--pink); color: #fff; font-family: var(--font-display); font-size: .75rem; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.15); animation: beat 1.6s ease-in-out infinite; }
.cu-foe-stop.c-blue { background: var(--blue); }
.cu-foe-stop .cu-hand-ic { width: 14px; height: 14px; }
.cu-pile.foe-stop { border-style: dashed; }
/* 내 손패 — 7장이 한 줄, 고른 카드는 분홍 테두리로 떠오른다. 내 차례에 어느 더미든 들어가는 카드는 살짝 밝다 */
.cu-hand { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; min-height: 64px; }
.cu-card { height: 64px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--text); font-family: var(--font-display); font-size: 1.35rem; box-shadow: 0 3px 0 var(--line); cursor: pointer; padding: 0; transition: transform .1s; }
.cu-card:disabled { opacity: .55; cursor: default; }
.cu-card.can { border-color: #BCE8D4; box-shadow: 0 3px 0 #BCE8D4; }
/* 10 차이 되돌리기가 되는 카드 — 손에 있는 동안 늘 노란 테두리와 작은 꼬리표 */
.cu-card { position: relative; }
.cu-card.back { border-color: var(--yellow); box-shadow: 0 3px 0 #E0A93A; }
.cu-card .cu-bk { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .68rem; line-height: 1; padding: 3px 6px; border-radius: 999px; background: var(--yellow); color: #6B4E00; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.15); pointer-events: none; }
.cu-card.pick { border-color: var(--pink); box-shadow: 0 3px 0 var(--pink-dark); transform: translateY(-6px); background: var(--pink-soft); color: var(--pink-dark); }
.cu-empty { grid-column: 1 / -1; align-self: center; }
.cu-actions { display: flex; justify-content: center; }
.cu-actions[hidden] { display: none; }
#cu-hint b { color: var(--pink-dark); font-weight: 400; margin: 0 1px; }
@media (max-width: 380px) { .cu-pile .cu-top { font-size: 1.6rem; } .cu-card { font-size: 1.15rem; height: 58px; } }
/* 불꽃놀이 */
/* 카드는 물건이라 어두운 화면에서도 밝은 채로 — 글자색을 카드 안에서 고정한다. 색은 색 이름 글자를 늘 같이 쓴다(색약) */
.fw { display: flex; flex-direction: column; gap: 8px; --fw-red: #FFC2C2; --fw-red-b: #FF7B7B; --fw-yellow: #FFE7A8; --fw-yellow-b: #F2C766; --fw-green: #CDEBC2; --fw-green-b: #9BD48A; --fw-blue: #C6E0F5; --fw-blue-b: #7FB8E6; --fw-white: #FFFDF8; --fw-white-b: #D9CFD4; }
/* 토큰 칩 네 개는 한 줄에 — 320px 에서도 두 줄로 접히지 않게 작게 */
.fw-head { display: flex; gap: 4px; flex-wrap: nowrap; justify-content: center; }
.fw-head .chip { padding: 3px 8px; gap: 3px; font-size: .75rem; white-space: nowrap; min-width: 0; }
.fw-head .chip b { font-weight: normal; }
.fw-board, .fw-side { background: var(--card); border-radius: var(--radius-sm); padding: 8px 10px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 6px; }
/* 판: 다섯 색 더미 + 옆에 버린 카드 칸 한 줄, 펼친 버린 카드는 그 아래 */
.fw-board { flex-direction: row; flex-wrap: wrap; align-items: stretch; padding: 6px 8px; }
.fw-board .fw-piles { flex: 1; min-width: 0; }
.fw-piles, .fw-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fw-pile, .fw-card { aspect-ratio: 5 / 7; border-radius: 10px; border: 2px solid var(--line); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--font-display); color: #4A3B44; padding: 0; margin: 0; font-size: 1rem; position: relative; }
.fw-pile { border-style: dashed; color: var(--muted); aspect-ratio: auto; height: 58px; }
.fw-pile b, .fw-card .n { font-size: 1.6rem; font-weight: normal; line-height: 1; }
.fw-pile span, .fw-card .cn { font-size: .75rem; line-height: 1.1; }
.fw-pile.on { border-style: solid; color: #4A3B44; box-shadow: 0 3px 0 rgba(0,0,0,.1); }
.fw-pile.full { outline: 3px solid var(--yellow); outline-offset: -1px; }
.fw-pile.on.c-red, .fw-card.face.c-red, .fw-card.back.k-red, .fw-mini.c-red { background: var(--fw-red); border-color: var(--fw-red-b); }
.fw-pile.on.c-yellow, .fw-card.face.c-yellow, .fw-card.back.k-yellow, .fw-mini.c-yellow { background: var(--fw-yellow); border-color: var(--fw-yellow-b); }
.fw-pile.on.c-green, .fw-card.face.c-green, .fw-card.back.k-green, .fw-mini.c-green { background: var(--fw-green); border-color: var(--fw-green-b); }
.fw-pile.on.c-blue, .fw-card.face.c-blue, .fw-card.back.k-blue, .fw-mini.c-blue { background: var(--fw-blue); border-color: var(--fw-blue-b); }
.fw-pile.on.c-white, .fw-card.face.c-white, .fw-card.back.k-white, .fw-mini.c-white { background: var(--fw-white); border-color: var(--fw-white-b); }
.fw-card.face { padding-bottom: 14px; box-shadow: 0 3px 0 rgba(0,0,0,.1); transition: transform .12s, opacity .12s; }   /* 아래 띠(.kn)에 가리지 않게 */
.fw-card .kn { position: absolute; left: 0; right: 0; bottom: 0; font-size: .75rem; line-height: 1.3; text-align: center; background: rgba(255,255,255,.7); border-radius: 0 0 8px 8px; color: #6E5F68; }
.fw-card.face.hit { transform: translateY(-4px); outline: 3px solid var(--pink); outline-offset: 1px; }
.fw-card.face.dim { opacity: .35; }
/* 내 카드 뒷면 — 색을 알면 그 색 바탕, 모르면 회색 무늬 */
.fw-card.back { background: repeating-linear-gradient(135deg, #EDE4E9 0 6px, #E2D6DD 6px 12px); border-color: #C9BFC4; color: #7A6B74; cursor: pointer; font: inherit; font-family: var(--font-display); box-shadow: 0 3px 0 rgba(0,0,0,.1); transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.fw-card.back.known { color: #4A3B44; }
.fw-card.back.pick { transform: translateY(-5px); outline: 3px solid var(--pink); outline-offset: 1px; }
.fw:not(.mine) .fw-card.back { cursor: default; }
.fw-who { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-family: var(--font-display); font-size: .9rem; color: var(--text); }
.fw-who > span { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-who small { font-size: .75rem; color: var(--muted); font-family: var(--font-body); text-align: right; min-width: 0; }
.fw.mine #fw-foe-sub { color: var(--pink-dark); }
/* 힌트 버튼 — 상대 손에 있는 색·숫자만 눌린다 */
.fw-hintbar { display: flex; flex-direction: column; gap: 6px; }
.fw-hintbar[hidden] { display: none; }
.fw-hk-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fw-hk { height: 36px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--tint); font: inherit; font-family: var(--font-display); font-size: .85rem; color: var(--text); padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; -webkit-tap-highlight-color: transparent; }
.fw-hk:disabled { opacity: .35; cursor: default; }
.fw-hk .dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid; flex: none; }
.fw-hk.c-red .dot { background: var(--fw-red); border-color: var(--fw-red-b); }
.fw-hk.c-yellow .dot { background: var(--fw-yellow); border-color: var(--fw-yellow-b); }
.fw-hk.c-green .dot { background: var(--fw-green); border-color: var(--fw-green-b); }
.fw-hk.c-blue .dot { background: var(--fw-blue); border-color: var(--fw-blue-b); }
.fw-hk.c-white .dot { background: var(--fw-white); border-color: var(--fw-white-b); }
.fw-hk.on { background: var(--pink); border-color: var(--pink-dark); color: #fff; }
.fw-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 36px; align-items: center; }
.fw-acts:empty { display: none; }
.fw-acts .btn.armed { box-shadow: 0 3px 0 var(--pink-dark), 0 0 0 3px rgba(255,143,171,.35); }
.fw-acts .btn.blue.armed { box-shadow: 0 3px 0 var(--blue-dark), 0 0 0 3px rgba(127,184,230,.4); }
.fw-tip { font-size: .8rem; }
.fw-not { font-size: .8rem; text-align: center; }
.fw-not[hidden] { display: none; }
.fw-not .seps > .sp { color: var(--pink-dark); font-family: var(--font-display); }
/* 버린 카드 — 더미 옆 작은 칸, 누르면 아래에 색별로 펼쳐진다 */
.fw-disc-toggle { flex: none; width: 50px; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--tint); border: 1.5px solid var(--line); border-radius: 10px; color: var(--pink-dark); font-family: var(--font-display); font-size: .75rem; line-height: 1.15; padding: 2px; cursor: pointer; word-break: keep-all; text-align: center; -webkit-tap-highlight-color: transparent; }
.fw-disc-toggle b { font-weight: normal; font-size: .85rem; }
.fw-disc-toggle.on { background: var(--pink-soft); border-color: var(--pink); }
.fw-disc-toggle:disabled { color: var(--muted); cursor: default; }
.fw-disc { display: flex; flex-direction: column; gap: 4px; flex-basis: 100%; }
.fw-disc[hidden] { display: none; }
.fw-disc-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fw-disc-row .lab { font-size: .75rem; color: var(--muted); width: 2.4em; flex: none; }
.fw-mini { width: 26px; height: 32px; border-radius: 6px; border: 1.5px solid; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: .9rem; color: #4A3B44; box-sizing: border-box; }
/* 기록 */
.fw-log { background: var(--card); border-radius: var(--radius-sm); padding: 6px 10px; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.fw-log b { color: var(--text); font-weight: normal; }
.fw-log .ok { color: var(--mint-dark); } .fw-log .bad { color: var(--pink-dark); }
html.dark .fw-card .kn { background: rgba(255,255,255,.75); }
/* 작은 폰 — 카드 높이를 줄여 내 손패까지 첫 화면에 */
@media (max-width: 380px) {
  .fw-card { aspect-ratio: auto; height: 62px; }
  .fw-pile { height: 54px; }
  .fw-disc-toggle { width: 46px; min-height: 54px; }
  .fw-pile b, .fw-card .n { font-size: 1.4rem; }
}
/* 탐험대 */
/* 위: 상대 길 5줄 → 가운데 버린 더미·더미 → 아래 내 길 5줄 → 손패 → 놓기/버리기 두 버튼. 색마다 모양(산·해·잎·물결·눈)이 같이 붙는다 */
.ex { display: flex; flex-direction: column; gap: 8px; --k: #C9BFC4; --k-soft: #F1ECEE; --k-text: #4A3B44; }
.ex-side { display: flex; flex-direction: column; gap: 4px; }
.ex-label { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-size: .95rem; }
.ex-label .muted { font-size: .8rem; }
.ex-label .ex-total { margin-left: auto; font-size: .85rem; color: var(--pink-dark); white-space: nowrap; }
/* 길 색 — 카드·길 표시·버린 더미가 같이 쓴다. 카드 그림은 물건이라 어두운 화면에서도 밝게 둔다 */
.k-R { --k: #E86A6A; --k-soft: #FFE0DC; --k-text: #8C2F2F; }
.k-Y { --k: #E8B84A; --k-soft: #FFF1C9; --k-text: #7A5A0E; }
.k-G { --k: #5DB86E; --k-soft: #DDF3E0; --k-text: #24632F; }
.k-B { --k: #5A9AD1; --k-soft: #DCEBFA; --k-text: #234C78; }
.k-W { --k: #9FA9B8; --k-soft: #F3F5F8; --k-text: #46505E; }
.ex-shape { width: 1em; height: 1em; flex: none; }
/* 길 한 줄: [모양+이름] [겹친 카드] [점수 미리 보기] */
.ex-paths { display: flex; flex-direction: column; gap: 3px; }
.ex-path { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 6px; border-radius: 10px; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.ex-path.hot { outline: 2px solid var(--k); outline-offset: -2px; background: var(--k-soft); }
html.dark .ex-path.hot { background: var(--tint); }
.ex-tag { display: inline-flex; align-items: center; gap: 3px; width: 50px; flex: none; font-family: var(--font-display); font-size: .78rem; color: var(--k-text); }
html.dark .ex-tag { color: var(--k); }
.ex-tag .ex-shape { font-size: 14px; color: var(--k); }
.ex-cards { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.ex-cards .ex-mini + .ex-mini { margin-left: -9px; }      /* 놓인 카드는 겹쳐서 — 마지막 것만 다 보인다 */
.ex-none { color: var(--faint); font-size: .8rem; padding-left: 4px; }
.ex-score { flex: none; width: 62px; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.ex-score small { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.ex-score b { font-family: var(--font-display); font-size: .95rem; color: var(--text); }
.ex-score b.neg { color: var(--red); }
.ex-score b.pos { color: var(--mint-dark, #2F9E6A); }
.ex-score b.zero { color: var(--faint); }
.ex-paths.foe .ex-path { min-height: 26px; }
.ex-paths.foe .ex-mini { width: 22px; height: 28px; font-size: .75rem; }
/* 작은 카드 — 길 위·버린 더미 위 */
.ex-mini { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 24px; height: 32px; border-radius: 5px; flex: none;
  background: #FFFDF8; border: 1.5px solid var(--k); color: var(--k-text); font-family: var(--font-display); font-size: .78rem; line-height: 1; box-shadow: 0 1px 0 rgba(0,0,0,.1); }
.ex-mini .ex-shape { font-size: 12px; color: var(--k); position: absolute; top: 1px; left: 2px; }
.ex-mini b { font-weight: normal; margin-top: 4px; }
.ex-mini.inv { background: var(--k-soft); font-size: .75rem; }
.ex-mini.top { z-index: 1; }
.ex-mini.empty { border-style: dashed; background: transparent; box-shadow: none; }
.ex-mini.empty .ex-shape { position: static; font-size: 12px; opacity: .6; }
.ex-mini.back { background: linear-gradient(135deg, #FFD3E0, #BFDCF5); border-color: #E6D6C6; }
/* 가운데: 버린 더미 5칸 + 더미. 뽑기 단계에만 눌린다 */
.ex-mid { display: flex; justify-content: center; align-items: flex-end; gap: 6px; background: var(--card); border-radius: 14px; padding: 6px 8px; box-shadow: var(--shadow); }
.ex-pile, .ex-deck { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 3px; border-radius: 10px; background: transparent; color: var(--muted); min-width: 40px; }
.ex-pile small, .ex-deck small { font-size: .75rem; white-space: nowrap; }
.ex-pile .ex-mini, .ex-deck .ex-mini { width: 30px; height: 40px; font-size: .95rem; }
.ex-pile .ex-mini .ex-shape { font-size: 12px; }
.ex-deck { margin-left: 6px; }
.ex-pile.on, .ex-deck.on { background: var(--pink-soft); color: var(--pink-dark); box-shadow: 0 3px 0 var(--pink); cursor: pointer; animation: ex-breathe 1.6s ease-in-out infinite; }
.ex-pile.on:active, .ex-deck.on:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pink); }
.ex-pile.blocked .ex-mini { opacity: .45; }
@keyframes ex-breathe { 50% { box-shadow: 0 3px 0 var(--pink), 0 0 0 4px var(--pink-soft); } }
/* 손패: 좁은 폰은 4장씩 두 줄, 넓으면 8장 한 줄 */
.ex-hand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 440px) { .ex-hand { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.ex-card { position: relative; height: 62px; border-radius: 10px; background: #FFFDF8; border: 2px solid var(--k); color: var(--k-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-family: var(--font-display); box-shadow: 0 3px 0 var(--k); transition: transform .1s; }
.ex-card .ex-shape { position: absolute; top: 4px; left: 5px; font-size: 13px; color: var(--k); }
.ex-card b { font-weight: normal; font-size: 1.35rem; line-height: 1; margin-top: 6px; }
.ex-card i { font-style: normal; font-size: .75rem; color: var(--k); }
.ex-card.inv { background: var(--k-soft); }
.ex-card.inv b { font-size: .95rem; }
.ex-card.pick { transform: translateY(-6px); outline: 3px solid var(--pink); outline-offset: 1px; }
.ex-card:disabled { opacity: .6; box-shadow: 0 2px 0 var(--k); }
.ex-actions { display: flex; gap: 8px; justify-content: center; }
.ex-actions[hidden] { display: none; }
.ex-actions .btn { flex: 1; max-width: 200px; }
.ex-hint { font-size: .82rem; }
.ex-hint[hidden] { display: none; }
.ex-hint b { color: var(--text); }
/* 두 요원 */
/* 5×5 낱말판 — 320px 에서도 5칸이 다 들어가게 글자 크기를 화면 너비로 clamp, 낱말은 가운데서 안 끊긴다 */
.ag { display: flex; flex-direction: column; gap: 10px; }
.ag-head { flex-wrap: wrap; }
.ag-tokens { gap: 3px; }
.ag-tokens .tok { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.ag-tokens .tok.on { background: var(--yellow, #FFD166); box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset; }
.ag-tokens b { margin-left: 4px; font-weight: normal; }
.ag-now { text-align: center; font-size: .95rem; color: var(--muted); }
.ag-now b { font-family: var(--font-display); font-size: 1.15rem; color: var(--pink-dark); }
.ag-grid { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 5px; }
.ag-grid.short { gap: 7px; }
.ag-grid.short .ag-cell { font-size: clamp(.95rem, 4.4vw, 1.25rem); aspect-ratio: 1 / .7; }   /* 짧은 판은 칸이 커서 글자도 크게 */
.ag-cell.just { animation: ag-just .55s cubic-bezier(.3, 1.6, .5, 1); }   /* 맞힌 칸이 톡 튀어 오른다 */
@keyframes ag-just { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-3deg); } 100% { transform: scale(1); } }
.ag-cell.miss { animation: shake .45s; }
.ag-dots { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.ag-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .3; animation: ag-dot 1.2s infinite; }
.ag-dots i:nth-child(2) { animation-delay: .2s; } .ag-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ag-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ag-cell.just, .ag-cell.miss, .ag-dots i { animation: none; } }
.ag-cell { position: relative; min-width: 0; aspect-ratio: 1 / .78; display: flex; align-items: center; justify-content: center; padding: 2px; border-radius: 12px;
  background: var(--card); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); font-family: var(--font-display);
  font-size: clamp(.75rem, 3.2vw, 1rem); line-height: 1.15; text-align: center; word-break: keep-all; overflow-wrap: anywhere; user-select: none; -webkit-user-select: none; cursor: pointer; }
.ag-cell span { max-width: 100%; }
.ag-cell.pick { outline: 3px solid var(--pink); outline-offset: 1px; transform: translateY(-2px); }
.ag-cell.found { background: #DDF3E7; border-color: #8FCC7C; box-shadow: 0 3px 0 #8FCC7C; color: #2F7A3E; }
.ag-cell.by { color: var(--muted); background: var(--tint); border-style: dashed; }
.ag-cell.by::after { content: ""; position: absolute; top: 4px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #C4B7BD; }
.ag-cell.boom { background: var(--red); border-color: #E05A5A; box-shadow: 0 3px 0 #E05A5A; color: #fff; }
/* 내 열쇠판 (나에게만) — 테두리 색으로: 요원 초록 · 구경꾼 회색 · 암살자 빨강 */
.ag-cell.k-agent { border-color: #5DB84C; box-shadow: 0 3px 0 #5DB84C; }
.ag-cell.k-bystander { border-color: #C4B7BD; box-shadow: 0 3px 0 #C4B7BD; }
.ag-cell.k-assassin { border-color: var(--red); box-shadow: 0 3px 0 #E05A5A; background: #FFF0F0; }
.ag-cell.k-assassin::before { content: ""; position: absolute; left: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.ag-cell.spent { opacity: .55; }
.ag-grid.lost .ag-cell:not(.found):not(.boom) { opacity: .7; }
.ag-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; font-size: .78rem; color: var(--text); }
.ag-legend[hidden] { display: none; }
.ag-legend .k { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--line); background: var(--card); vertical-align: -3px; margin-right: 2px; }
.ag-legend .k.agent { border-color: #5DB84C; }
.ag-legend .k.by { border-color: #C4B7BD; }
.ag-legend .k.boom { border-color: var(--red); background: #FFF0F0; }
.ag-form { display: flex; flex-direction: column; gap: 8px; }
.ag-form[hidden] { display: none; }
.ag-form .input { text-align: center; }
.ag-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); gap: 4px; }   /* 좁은 폰·큰 글자면 두 줄로 — 칸이 36px 밑으로 안 줄게 */
.ag-nums .pill { padding: 0; min-height: 40px; min-width: 0; font-family: var(--font-display); font-size: 1rem; }
.ag-nums .pill:disabled { opacity: .35; }
.ag-guessbar { display: flex; justify-content: center; gap: 8px; }
.ag-guessbar[hidden] { display: none; }
.ag-guessbar .btn.on { border: 2px solid var(--pink); }
.ag-log { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.ag-log-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 10px; border-radius: 10px; background: var(--card); }
.ag-log-row b { font-family: var(--font-display); color: var(--pink-dark); }
.ag-log-row .picks { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ag-log-row .r { padding: 1px 8px; border-radius: 999px; font-size: .8rem; }
.ag-log-row .r.agent { background: #DDF3E7; color: #2F7A3E; }
.ag-log-row .r.bystander { background: var(--tint); color: var(--muted); text-decoration: line-through; }
.ag-log-row .r.assassin { background: var(--red); color: #fff; }
html.dark .ag-cell.found, html.dark .ag-log-row .r.agent { background: #14342A; color: #7FD9B0; }
html.dark .ag-cell.k-assassin { background: #3A1E24; }
/* 연습 상대 — 대기실 알림 줄 */
.practice-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius); background: var(--tint); color: var(--muted); font-size: .85rem; text-align: center; }
.invite #btn-bot { margin-top: 8px; }

/* 그림 텔레파시 */
.dr { display: flex; flex-direction: column; gap: 10px; }
.dr-head { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dr-head .chip { padding: 5px 10px; }
.dr-head .chip b { font-weight: normal; }
.dr-clock { min-width: 78px; justify-content: center; font-variant-numeric: tabular-nums; }
.dr-clock.low { background: #FFD9D9; color: #C0392B; }
.dr-rounds { display: flex; justify-content: center; gap: 6px; }
.dr-rounds .r { width: 26px; height: 26px; border-radius: 50%; border: 2px dashed var(--line); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: .85rem; box-sizing: border-box; color: var(--muted); }
.dr-rounds .r.now { border-style: solid; border-color: var(--pink); }
.dr-rounds .r.done { border-style: solid; background: var(--card); }
.dr-rounds .r.p3 { background: #DDF3E7; border-color: #8FCC7C; color: #2F7A3E; }
.dr-rounds .r.p2 { background: var(--mint-soft); border-color: #9BD4C0; color: var(--mint-dark); }
.dr-rounds .r.p1 { background: var(--yellow-soft); border-color: #F2C766; color: var(--amber-text); }
.dr-word { text-align: center; font-size: .95rem; color: var(--muted); line-height: 1.4; }
.dr-word b { font-family: var(--font-display); font-weight: normal; font-size: 1.5rem; color: var(--pink-dark); margin-left: 6px; vertical-align: -2px; word-break: keep-all; }
.dr-word.mine, .dr-word.open { color: var(--text); }
.dr-play { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.dr-paper { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); background: #FFFFFF; border: 2px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,.06); overflow: hidden; box-sizing: border-box; }
.dr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.dr-canvas.can { cursor: crosshair; }
.dr-reveal { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 10px; pointer-events: none; }
.dr-rv { background: rgba(255,255,255,.94); border: 2px solid var(--pink); border-radius: var(--radius-sm); padding: 8px 16px; text-align: center; color: #4A3B44; box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.dr-rv .w { font-family: var(--font-display); font-size: 1.6rem; color: #E86A8C; line-height: 1.2; word-break: keep-all; }
.dr-rv .h { font-size: .95rem; }
.dr-rv .h .pts { font-family: var(--font-display); font-weight: normal; color: #2F7A3E; }
.dr-rv .n { font-size: .75rem; color: #8C7B84; margin-top: 2px; }
.dr-tools { width: 100%; max-width: 440px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.dr-inks, .dr-widths { display: flex; gap: 6px; }
.dr-ink, .dr-width { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dr-ink.on, .dr-width.on { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); }
.dr-ink i { width: 24px; height: 24px; border-radius: 50%; display: block; }
.dr-width i { display: block; width: 24px; border-radius: 99px; background: var(--text); }
.dr-width i.w4 { height: 4px; }
.dr-width i.w10 { height: 10px; }
.dr-clear .uicon, .dr-passrow .uicon { vertical-align: -0.2em; }
.dr-form { width: 100%; max-width: 440px; display: flex; gap: 8px; }
.dr-form .input { flex: 1; min-width: 0; font-size: 16px; text-align: center; }   /* 16px 밑이면 아이폰이 글 칸에서 화면을 확대한다 */
.dr-send { flex: none; padding-left: 16px; padding-right: 16px; }
.dr-guesses { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 4px; }
.dr-gh { font-size: .8rem; color: var(--muted); text-align: center; }
.dr-gl { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.dr-gl .g { padding: 3px 10px; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); font-size: .9rem; color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(232,80,107,.6); word-break: keep-all; }
.dr-gl .g.ok { background: #DDF3E7; border-color: #8FCC7C; color: #2F7A3E; text-decoration: none; font-family: var(--font-display); }
.dr-passrow { display: flex; justify-content: center; }
.dr-passrow .btn.armed { border: 2px solid var(--pink); color: var(--pink-dark); }
.dr-gallery { display: flex; flex-direction: column; gap: 8px; }
.dr-gt { margin: 0; text-align: center; font-family: var(--font-display); font-weight: normal; color: var(--pink-dark); font-size: 1.1rem; }
.dr-gg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 520px) { .dr-gg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dr-card { margin: 0; background: var(--card); border-radius: var(--radius-sm); padding: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dr-card canvas { width: 100%; aspect-ratio: 1 / 1; display: block; background: #FFFFFF; border-radius: 8px; border: 1px solid var(--line); box-sizing: border-box; }
.dr-card figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 6px; font-size: .78rem; color: var(--muted); text-align: center; }
.dr-card figcaption b { font-family: var(--font-display); font-weight: normal; font-size: .95rem; color: var(--text); word-break: keep-all; }
.dr-card .p { padding: 0 6px; border-radius: 999px; background: var(--tint); }
.dr-card .p.p3 { background: #DDF3E7; color: #2F7A3E; }
.dr-card .p.p2 { background: var(--mint-soft); color: var(--mint-dark); }
.dr-card .p.p1 { background: var(--yellow-soft); color: var(--amber-text); }
html.dark .dr-rounds .r.p3, html.dark .dr-gl .g.ok, html.dark .dr-card .p.p3 { background: #14342A; color: #7FD9B0; border-color: #3E7A5F; }
html.dark .dr-clock.low { background: #4A2226; color: #FF9C9C; }
/* 향신료 장터 */
/* 위: 상대 줄 → 토큰 더미 6종(작은 칩 한 줄) → 보너스·떨어진 상품·더미 한 줄 → 시장 5장 → 내 줄 → 손패 → 확정 버튼. 상품마다 모양이 같이 붙는다. 320px 폭까지 */
div.mk { display: flex; flex-direction: column; gap: 8px; --k: #C9BFC4; --k-soft: #F1ECEE; --k-text: #4A3B44; }
div.mk .g-diamond { --k: #E86A6A; --k-soft: #FFE0DC; --k-text: #8C2F2F; }
div.mk .g-gold { --k: #E0A93A; --k-soft: #FFF1C9; --k-text: #7A5A0E; }
div.mk .g-silver { --k: #8E99AA; --k-soft: #EEF1F5; --k-text: #46505E; }
div.mk .g-cloth { --k: #A77BD6; --k-soft: #F0E6FA; --k-text: #5A3A80; }
div.mk .g-spice { --k: #4FAE63; --k-soft: #DDF3E0; --k-text: #24632F; }
div.mk .g-leather { --k: #A8744F; --k-soft: #F3E6DA; --k-text: #6A4128; }
div.mk .g-camel { --k: #C9A27A; --k-soft: #FFF3E3; --k-text: #6E5236; }
.mk-shape { width: 1em; height: 1em; flex: none; }
.mk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 10px; border-radius: 12px; background: var(--card); box-shadow: 0 1px 0 var(--line); font-size: .85rem; color: var(--muted); }
.mk-who { font-family: var(--font-display); font-weight: normal; font-size: .98rem; color: var(--text); max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-stat { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.mk-stat b { color: var(--text); font-weight: normal; font-family: var(--font-display); }
.mk-stat.camel .mk-shape { font-size: 16px; color: #C9A27A; }
.mk-score { margin-left: auto; display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; font-family: var(--font-display); color: var(--pink-dark); }
.mk-score b { font-weight: normal; font-size: 1.1rem; }
.mk-score small { font-family: var(--font-body); font-size: .75rem; color: var(--muted); }
.mk-q { color: var(--faint); }
.mk-series { display: flex; justify-content: center; align-items: baseline; gap: 8px; font-size: .85rem; color: var(--muted); }
.mk-series[hidden] { display: none; }
.mk-series b { font-family: var(--font-display); font-weight: normal; color: var(--pink-dark); font-size: 1rem; }
/* 토큰 더미 6종 — 작은 칩 한 줄: 윗줄 모양+다음 점수, 아랫줄 남은 개수 */
.mk-bank { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.mk-stack { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 2px 1px; border-radius: 8px; background: var(--k-soft); color: var(--k-text); border: 1.5px solid var(--k); min-width: 0; }
.mk-top { display: inline-flex; align-items: center; gap: 2px; }
.mk-stack .mk-shape { font-size: 13px; color: var(--k); }
.mk-stack b { font-family: var(--font-display); font-weight: normal; font-size: 1rem; line-height: 1.1; }
.mk-stack small { font-size: .75rem; line-height: 1.2; white-space: nowrap; }
.mk-stack.empty { opacity: .45; border-style: dashed; background: transparent; }
html.dark .mk-stack { background: var(--tint); color: var(--k); }
.mk-extra { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }   /* 320px 에서 한 줄 — 넘치면 그때만 접힌다 */
.mk-chip { padding: 2px 6px; border-radius: 999px; background: var(--tint); color: var(--muted); font-size: .75rem; white-space: nowrap; }
.mk-chip b { font-weight: normal; font-family: var(--font-display); color: var(--text); }
.mk-chip.warn { background: var(--pink-soft); color: var(--pink-dark); }
.mk-chip.warn b { color: var(--pink-dark); }
/* 시장 5장 · 손패 — 카드는 물건 그림이라 어두운 화면에서도 밝게 둔다 */
.mk-market { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.mk-hand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-height: 64px; }
@media (min-width: 440px) { .mk-hand { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.mk-slot, .mk-card { position: relative; min-width: 0; height: 66px; padding: 4px 2px; border-radius: 10px; background: #FFFDF8; border: 2px solid var(--k); color: var(--k-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; box-shadow: 0 3px 0 var(--k); transition: transform .1s; cursor: pointer; }
.mk-slot .mk-shape, .mk-card .mk-shape { font-size: 26px; color: var(--k); }
.mk-slot i, .mk-card i { font-style: normal; font-family: var(--font-display); font-size: .75rem; line-height: 1; white-space: nowrap; }
.mk-slot.pick, .mk-card.pick { transform: translateY(-5px); outline: 3px solid var(--pink); outline-offset: 1px; }
.mk-slot:disabled, .mk-card:disabled { cursor: default; box-shadow: 0 2px 0 var(--k); }
.mk-card:disabled { opacity: .7; }
.mk-slot.empty { border: 2px dashed var(--line); background: transparent; box-shadow: none; }
.mk-none { grid-column: 1 / -1; text-align: center; color: var(--faint); font-size: .85rem; align-self: center; }
/* 교환에 낼 낙타 수 */
.mk-give { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text); white-space: nowrap; }
.mk-give[hidden] { display: none; }
.mk-give b { font-family: var(--font-display); font-weight: normal; color: var(--pink-dark); }
.mk-step { width: 32px; height: 32px; border-radius: 50%; background: var(--pink-soft); color: var(--pink-dark); font-family: var(--font-display); font-size: 1.1rem; line-height: 1; }
.mk-step:disabled { opacity: .4; }
.mk-actions { display: flex; gap: 8px; justify-content: center; }
.mk-actions[hidden] { display: none; }
.mk-actions .btn { flex: 1; max-width: 220px; }
.mk-actions .btn:disabled { opacity: .5; }
.mk-why { font-size: .8rem; color: var(--pink-dark); }
.mk-why[hidden], .mk-hint[hidden] { display: none; }
.mk-hint { font-size: .82rem; }
.mk-hint b { color: var(--text); font-weight: normal; font-family: var(--font-display); }
@media (max-width: 360px) {
  .mk-slot, .mk-card { height: 58px; }
  .mk-slot .mk-shape, .mk-card .mk-shape { font-size: 22px; }
  .mk-slot i, .mk-card i { font-size: .75rem; }
  .mk-market { gap: 4px; padding: 6px; }
}

/* 조각보 */
/* 위: 두 사람 → 시간 트랙(18칸 × 세 줄) → 말 앞 조각 3개·그다음·앞서가기 → 내 조각보 9×9 → 놓기 도구 → 상대 조각보(작게). 세로 320px 부터 */
.qt, .qt-zoom { --qt-cloth: #FBF4EA; --qt-line: #EADCC9; --qt-seam: rgba(74, 59, 68, .38); }
.qt { display: flex; flex-direction: column; gap: 8px; }
html.dark .qt, html.dark .qt-zoom { --qt-cloth: #302D37; --qt-line: #45424D; --qt-seam: rgba(0, 0, 0, .5); }
.qt-bi { width: 1em; height: 1em; flex: none; vertical-align: -0.15em; }
/* 두 사람 */
.qt-players { display: flex; flex-direction: column; gap: 4px; }
.qt-p { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 12px; background: var(--card); box-shadow: 0 1px 0 var(--line); font-size: .85rem; }
.qt-p.turn { outline: 2px solid var(--pink); outline-offset: -2px; }
.qt-name { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-stat { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.qt-stat small { font-size: .75rem; color: var(--muted); }
.qt-stat b { font-family: var(--font-display); font-weight: normal; }
.qt-stat.sc b { color: var(--mint-dark); }
.qt-stat.sc b.neg { color: var(--red); }
.qt-stat.sc.now b { color: var(--muted); }   /* 판 도중 점수는 "지금 끝나면" 어림값이라 빨갛게 겁주지 않아요 */
.qt-stat.sc.empty b { color: var(--text); }
/* 말 — 플레이어 색 */
.qt-tok { --tc: #C9BFC4; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 1.5px #fff; flex: none; }
.qt-tok.c-pink { --tc: #F06A93; } .qt-tok.c-blue { --tc: #5A9AD1; } .qt-tok.c-yellow { --tc: #F5B400; } .qt-tok.c-green { --tc: #3B9E74; }
.qt-tok.c-purple { --tc: #A98AE0; } .qt-tok.c-orange { --tc: #FF9F5A; } .qt-tok.c-teal { --tc: #46B3A9; } .qt-tok.c-red { --tc: #FF7B7B; }
/* 시간 트랙: 0~53 을 18칸씩 세 줄(두 줄이면 칸이 8px 남짓이라 안 보였다). 단추 칸(수입)·가죽 칸(1×1)·말 */
.qt-track { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px; padding: 8px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.qt-sp { position: relative; aspect-ratio: 1; border-radius: 3px; background: var(--qt-cloth); box-shadow: inset 0 0 0 1px var(--qt-line); display: grid; place-items: center; }
.qt-sp.start, .qt-sp.end { background: var(--pink-soft); }
.qt-inc { width: 70%; height: 70%; border-radius: 50%; background: #F5C45E; box-shadow: inset 0 0 0 1px #C98A1C; }
.qt-patch { width: 62%; height: 62%; border-radius: 2px; background: #D9B38C; box-shadow: inset 0 0 0 1px #A9825C; }
/* 말은 칸보다 크게, 흰 테두리 밖에 그 사람 색 테두리를 한 번 더 — 한 칸에 둘이면 대각선으로 비껴 둔다 */
.qt-sp .qt-tok { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; z-index: 1;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--tc), 0 2px 4px rgba(0, 0, 0, .3); }
.qt-sp .qt-tok.me { z-index: 2; }
.qt-sp.both .qt-tok.foe { transform: translate(4px, -4px); }
.qt-sp.both .qt-tok.me { transform: translate(-4px, 4px); }
/* 말 앞 조각 3개 */
.qt-market { display: flex; flex-direction: column; gap: 6px; }
.qt-front { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.qt-piece { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 5px; border-radius: 12px; background: var(--card); color: var(--text);
  box-shadow: 0 3px 0 var(--line); cursor: pointer; transition: transform .1s; }
.qt-piece.pick { transform: translateY(-4px); outline: 3px solid var(--pink); outline-offset: 0; }
.qt-piece.no .qt-pv { opacity: .45; }
.qt-pv { height: 58px; display: grid; place-items: center; }
.qt-shape { display: block; max-width: 100%; max-height: 56px; width: auto; height: auto; }
.qt-pv .qt-shape rect { stroke: var(--qt-seam); stroke-width: .6; }
.qt-nums { display: flex; justify-content: center; gap: 6px; font-size: .8rem; }
.qt-nums span { display: inline-flex; align-items: baseline; gap: 1px; white-space: nowrap; }
.qt-nums small { font-size: .75rem; color: var(--muted); }
.qt-nums b { font-family: var(--font-display); font-weight: normal; }
.qt-why { font-size: .75rem; color: var(--red); white-space: nowrap; }
.qt-next { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; min-height: 18px; }
.qt-next small { font-size: .75rem; }
.qt-up { display: inline-grid; place-items: center; opacity: .8; }
.qt-up .qt-shape rect { stroke: var(--qt-seam); stroke-width: .4; }
.qt-adv { align-self: center; display: inline-flex; align-items: center; gap: 8px; }
.qt-adv[hidden] { display: none; }
.qt-gain { display: inline-flex; align-items: center; gap: 2px; font-size: .88rem; color: var(--amber-text); }
/* 조각보 9×9 — 칸 사이 틈 없이, 조각 가장자리엔 솔기(안쪽 그림자) */
.qt-wrap { display: flex; justify-content: center; }
.qt-board { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(9, minmax(0, 1fr)); aspect-ratio: 1; background: var(--qt-cloth);
  border-radius: 12px; padding: 5px; box-shadow: var(--shadow); touch-action: manipulation; }
.qt-board.mine { width: 100%; max-width: min(100%, 360px, 52vh); scroll-margin: 12px; }
.qt-board.placing { touch-action: none; cursor: grab; }   /* 조각을 끄는 동안 화면이 같이 밀리지 않게 */
.qt-board.dragging { cursor: grabbing; }
.qt-c { position: relative; box-shadow: inset 0 0 0 .5px var(--qt-line); }
.qt-c.f { background-color: var(--pc); }
.qt-c.p1 { background-image: radial-gradient(rgba(255, 255, 255, .55) 18%, transparent 20%); background-size: 50% 50%; }
.qt-c.p2 { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .45) 0 2px, transparent 2px 6px); }
.qt-dots { position: absolute; left: 2px; top: 2px; display: flex; gap: 1px; pointer-events: none; }
.qt-dots i { width: 6px; height: 6px; border-radius: 50%; background: #F5C45E; box-shadow: 0 0 0 1px #C98A1C; }
/* 7×7 보너스 자리 */
.qt-bonus { pointer-events: none; border: 2px dashed var(--pink-dark); border-radius: 6px; z-index: 1; }
/* 뜬 조각 — 놓을 수 있으면 초록 테두리, 아니면 빨강 */
.qt-ghost { pointer-events: none; z-index: 2; background: var(--pc); opacity: .72; border-radius: 3px; }
.qt-ghost.ok { box-shadow: inset 0 0 0 3px #3EAE6A; }
.qt-ghost.bad { box-shadow: inset 0 0 0 3px #E24C4C; background: #FFB3B3; }
/* 놓기 도구 */
.qt-tools { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: -2px; }
.qt-tools[hidden] { display: none; }
.qt-tools .btn.sm { padding: 8px 10px; display: inline-flex; align-items: center; gap: 4px; }
.qt-flip { width: 16px; height: 16px; }
.qt-place:not(:disabled) { background: #3EAE6A; box-shadow: 0 3px 0 #2E8A52; }
/* 상대 조각보 (작게) */
.qt-foe { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.qt-foe-head { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-size: .88rem; }
.qt-foe-head b { font-weight: normal; }
.qt-7 { color: var(--pink-dark); }
.qt-board.foe { width: 132px; padding: 3px; border-radius: 8px; }
button.qt-board.foe { border: 0; cursor: zoom-in; font: inherit; }   /* 누르면 크게 */
.qt-zoom { z-index: 30; }
.qt-zoom-box { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--card); border-radius: 22px; padding: 14px; width: min(92vw, 420px); }
.qt-zoom-box .qt-board { width: 100%; }
/* 트랙 아래 칸 설명 */
.qt-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; font-size: .78rem; color: var(--muted); margin-top: -2px; }
.qt-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.qt-legend .qt-inc, .qt-legend .qt-patch { width: 13px; height: 13px; flex: none; }
.qt-lead { font-size: .86rem; margin-top: -2px; }
.qt-lead[hidden] { display: none; }
.qt-lead b { color: var(--text); font-weight: normal; font-family: var(--font-display); }
.qt-hint { font-size: .82rem; }
.qt-hint[hidden] { display: none; }
.qt-hint b { color: var(--text); font-weight: normal; font-family: var(--font-display); }
@media (max-width: 360px) {
  .qt-p { gap: 5px; font-size: .78rem; padding: 3px 6px; }
  .qt-track { padding: 7px 6px; gap: 2px; }
  .qt-board.mine { max-width: min(100%, 300px, 52vh); }   /* 작은 폰은 조각보를 살짝 줄여 놓기 도구까지 한 화면에 */
  .qt-pv { height: 48px; }
  .qt-shape { max-height: 46px; }
  .qt-nums { gap: 3px; font-size: .75rem; }
  .qt-tools .btn.sm { padding: 7px 8px; font-size: .88rem; }
}

/* 향신료 장터 — 안쪽 small 은 부모 글자의 83%라 12px 밑으로 떨어졌다 */
div.mk small { font-size: .75rem; }

/* 숫자 올리기 — 상대 신호 딱지는 더미 폭 안에서 (글자 큰 폰에서 오른쪽 더미 밖으로 넘쳤다), 글자는 12px */
.cu-foe-stop { left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 100%; transform: none; overflow: hidden; }
.cu-foe-stop small { font-size: 1em; overflow: hidden; text-overflow: ellipsis; }

/* 상대 수 연출 — 움직임은 각 게임 js 가 element.animate() 로 상대 수일 때만 해요.
   움직임 줄이기를 켠 폰에선 원래 있던 CSS 애니(커넥트4 떨어지기·오셀로 뒤집힘)도 멈추고 강조(.last)만 남겨요 */
@media (prefers-reduced-motion: reduce) {
  .c4-cell .chip.drop, .stone.flip { animation: none; }
}
/* 설명서(meta.guide) — 한 줄 요약 · 실제 화면 그림(번호) · 목표/차례/끝 세 칸 · 알아 두면 좋은 것 · 낱말 풀이 */
.guide { display: flex; flex-direction: column; gap: 14px; text-align: left; font-size: .92rem; line-height: 1.55; }
.guide b { font-family: var(--font-display); font-weight: 400; color: var(--pink-dark); }
.guide ul { margin: 2px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.guide h3 { font-family: var(--font-display); font-weight: 400; font-size: 1rem; margin: 3px 0 2px; }
.g-one { margin: 0; font-size: 1rem; }
.g-pic { margin: 0; background: var(--tint); border-radius: 16px; padding: 10px; }
.g-pic[hidden], .g-keys[hidden] { display: none; }
.g-shot { position: relative; width: min(100%, calc(32dvh * var(--ar, 1))); margin: 0 auto; }   /* 첫 장이 창 안에 거의 다 들어오게 */
.g-shot img { display: block; width: 100%; height: auto; border-radius: 10px; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; pointer-events: none; }   /* 그림 위에서 옆으로 밀면 그림 끌기로 잡혀 페이지가 바뀌었다 — 넘기기만 되게 */
.g-pic figcaption { font-size: .78rem; color: var(--muted); text-align: center; margin-top: 6px; }
.g-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pink-dark); color: #fff; font-style: normal; font-family: var(--font-display); font-size: .8rem; line-height: 1; flex: none; }
.g-shot .g-mark { position: absolute; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.25); }
.g-keys { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: .88rem; }
.g-keys li { display: flex; gap: 8px; align-items: flex-start; }
.g-keys li .g-mark { margin-top: 1px; }
.g-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.g-ic { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; }
.g-ic .uicon { width: 22px; height: 22px; }
.g-step.goal .g-ic { background: var(--yellow-soft); }
.g-step.turn .g-ic { background: var(--pink-soft); }
.g-step.end .g-ic { background: var(--mint-soft, #DDF3E7); }
.guide .who { display: inline-block; font-family: var(--font-display); font-size: .78rem; padding: 0 8px; border-radius: 999px; background: var(--pink-soft); color: var(--pink-dark); margin-right: 5px; }
.guide .who.b { background: var(--blue-soft, #E3EEF9); color: #4A7FB5; }
.guide .g { font-family: var(--font-display); color: var(--mint-dark); }
.g-ex { margin: 7px 0 0; background: var(--tint); border-radius: 10px; padding: 7px 10px; font-size: .86rem; }
.g-end { margin-right: 4px; }
.guide .g-end.win { color: var(--mint-dark); }
.guide .g-end.lose { color: var(--red); }
.guide .g-end.draw, .guide .g-end.end { color: var(--muted); }
.g-tips h3 { font-size: .95rem; color: var(--muted); }
.g-tips ul { font-size: .88rem; }
.g-words { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: .84rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 10px; }
.g-words div { display: flex; gap: 8px; }
.g-words dt { font-family: var(--font-display); color: var(--text); flex: none; min-width: 4.5em; }
.g-words dd { margin: 0; min-width: 0; }
/* 첫 판 따라 하기(코치) — 짚는 테두리는 탭을 막지 않고, 말풍선만 누를 수 있다 */
.coach-ring { position: fixed; z-index: 60; border: 3px solid var(--pink); border-radius: 14px; box-shadow: 0 0 0 4px rgba(255,143,171,.25); pointer-events: none; transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; }
.coach-ring[hidden], .coach-bubble[hidden] { display: none; }
.coach-bubble { position: fixed; z-index: 61; background: var(--text); color: var(--bg); border-radius: 16px; padding: 12px 14px 10px; font-size: .92rem; line-height: 1.5; box-shadow: 0 10px 28px rgba(0,0,0,.28); animation: pill-in .18s ease-out; }
.coach-bubble::before { content: ""; position: absolute; left: var(--tip, 50%); top: -7px; transform: translateX(-50%); border: 8px solid transparent; border-top: 0; border-bottom-color: var(--text); }
.coach-bubble.up::before { top: auto; bottom: -7px; border: 8px solid transparent; border-bottom: 0; border-top-color: var(--text); }
.coach-bubble b { font-family: var(--font-display); font-weight: 400; color: var(--pink); }
.cb-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.cb-skip { background: none; border: 0; color: inherit; opacity: .7; font: inherit; font-size: .82rem; padding: 6px 2px; text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) { .coach-ring { animation: coach-pulse 1.4s ease-in-out infinite; } @keyframes coach-pulse { 50% { box-shadow: 0 0 0 8px rgba(255,143,171,.08); } } }
.g-step ul { list-style: none; padding-left: 0; gap: 6px; }   /* 세 칸 안은 점 없이 한 줄씩 — 좁은 폰에서 글이 오른쪽으로 밀리지 않게 */
/* 가로 화면·돌린 루미루미에선 창 여백이 14px 18px 로 줄어든다 — 제목 줄도 같은 만큼만 늘려야 4px 옆으로 넘치지 않는다 */
@media (max-height: 520px) { .overlay > .rules-box .rec-head { margin: -14px -18px 6px; padding: 14px 18px 8px; top: -14px; } }
body.rm-forced .overlay > .rules-box .rec-head { margin: -14px -18px 6px; padding: 14px 18px 8px; top: -14px; }
/* 어두운 화면에서 밝게 튀던 것들 (tools/audit/dark_scan.js 로 찾음) */
html.dark .btn:disabled { color: #8C8299; }
html.dark .sd-pad .key.tool { box-shadow: 0 4px 0 #2A2216; }
html.dark .sd-pad #sd-memo.on { box-shadow: 0 4px 0 #2E7A5C; }
html.dark .sd-pad.memo .key[data-v]:not(.erase), html.dark .sd-pad.memo .key.erase, html.dark .sd-pad.memo .key.undo { box-shadow: 0 4px 0 #1F4A3B; }
html.dark .ag-legend .k.boom { background: #4A2A2E; }
html.dark .pw.zero { background: var(--tint); }
html.dark .gs-chip.g.gold { background: #3E331C; }
/* 보석상 가로: 가격 4개가 카드 폭(안쪽 63px)에 1px 모자라 두 줄로 넘어가 아래가 잘렸다 (끝난 뒤 아래 바가 생기면 카드가 47px 로 낮아져서) — 한 줄에 들어가게 */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .gs.wide .gs-market .gs-card .cost { flex-wrap: nowrap; gap: 1px; }
  .gs.wide .gs-market .gs-card .cost .gs-pip { width: 14px; height: 14px; font-size: min(.72rem, 11.5px); border-width: 1px; }
}
/* 스도쿠 좁은 폰(320px): 숫자 키가 35px 로 기준(36px)에 1px 모자랐고 메모가 8px 였다 — 키 사이를 좁히고 메모 글자를 키운다 */
.sd-notes { font-size: min(3vw, 12px); }
@media (max-width: 360px) {
  .sd-pad { gap: 4px; padding: 4px; }
  .sd-notes { font-size: min(2.7vw, 12px); }   /* 칸이 30px 라 이보다 키우면 위아래 줄이 잘린다 */
}
/* 컴퓨터·태블릿: 앱 기둥이 600px 로 넓으면 판이 창 높이보다 커져 아래가 잘렸다 (1024×768 창에서 게임 15개) —
   기둥 폭을 창 높이에 맞춰 480~600px 사이로. 폰(세로 480px 이하)은 그대로 */
@media (min-width: 720px) {
  #app, #tut .tut-app { max-width: clamp(480px, calc((100dvh - 120px) * .85), 600px); }
  .startbar .btn { max-width: calc(clamp(480px, calc((100dvh - 120px) * .85), 600px) - 28px); }
}
/* 향신료 장터 세로: 카드가 작고 위에 몰려 화면 아래 절반이 비었다 → 카드를 키우고, 내 줄·손패·버튼은 아래(엄지 닿는 곳)로.
   높이가 넉넉한 폰에서만 (낮은 폰은 예전처럼 위에서부터) */
@media (min-height: 700px) and (orientation: portrait) {
  .room.in-game div.mk { min-height: calc(100dvh - 84px - var(--safe-top) - var(--safe-bottom)); }
  .room.in-game div.mk .mk-market { margin-block: auto; }   /* 상대·토큰은 위, 시장은 가운데, 나는 아래 */
  .mk-slot, .mk-card { height: 84px; gap: 4px; }
  .mk-slot .mk-shape, .mk-card .mk-shape { font-size: 32px; }
  .mk-slot i, .mk-card i { font-size: .85rem; }
  .mk-market { gap: 7px; padding: 10px; }
  .mk-hand { gap: 7px; min-height: 84px; }
}
/* 지뢰찾기 힌트: 고른 칸이 모두 지뢰였으면 그 칸들을 잠깐 빨갛게 짚는다 (알림만 떠서 어느 칸인지 몰랐다) */
.mines-grid .cell.hint-mine { box-shadow: inset 0 0 0 3px var(--red); animation: hint-mine 1s ease-in-out 3; }
@keyframes hint-mine { 50% { box-shadow: inset 0 0 0 3px var(--red), 0 0 0 3px rgba(255,123,123,.35); } }
@media (prefers-reduced-motion: reduce) { .mines-grid .cell.hint-mine { animation: none; } }
/* 두 요원: 끝난 판에서 내 열쇠판 / 상대 열쇠판 바꿔 보기 */
.ag-endview { display: flex; justify-content: center; gap: 6px; }
.ag-endview[hidden] { display: none; }
.ag-endview .pill { min-height: 36px; padding: 0 14px; font-family: var(--font-display); }
/* 커플 공간: 방 코드·초대는 안 보인다 (두 사람만의 고정된 곳) */
.room.couple .topbar .code, .room.couple #btn-share { display: none; }
.couple-wait b { font-family: var(--font-display); font-weight: 400; color: var(--pink-dark); }
/* 홈: 커플로 묶인 계정 — 둘만의 공간 패널 */
.couple-home { align-items: center; text-align: center; }
.couple-home .ch-faces { display: flex; align-items: center; justify-content: center; gap: 10px; }
.couple-home .ch-faces .av-img, .couple-home .ch-faces .av-letter { width: 64px; height: 64px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.4rem; }
.couple-home .ch-heart .uicon { width: 30px; height: 30px; animation: beat 1.4s ease-in-out infinite; }
.couple-home .ch-status { margin: 0; color: var(--muted); }
.couple-home .ch-status.here b { color: var(--pink-dark); font-family: var(--font-display); font-weight: 400; }
.couple-home .ch-note { font-size: .85rem; margin: 0; }
/* 커넥트4 좁은 폰: 화살표 7개가 35px 로 1px 모자랐다 — 양옆 여백·사이를 줄여 36px 이상 */
@media (max-width: 360px) { .c4-cols { gap: 2px; padding: 0 9.5px; } }   /* 판 칸 가운데와 화살표 가운데가 맞게 */
/* 상대 감정표현이 도착: 판 위 가운데에 크게 → 상대 얼굴로 날아간다 */
.emote-arrive { position: fixed; left: 50%; top: 32%; z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; transform: translate(-50%, 0); }
.emote-arrive img { width: 80px; height: 80px; filter: drop-shadow(0 6px 14px rgba(74,59,68,.35)); }
.emote-arrive span { font-family: var(--font-display); font-size: .95rem; color: var(--text); background: var(--card); border-radius: 999px; padding: 3px 12px; box-shadow: 0 4px 12px rgba(0,0,0,.15); white-space: nowrap; }
/* 하트 메뉴 첫 안내 — 하트 왼쪽에 말풍선, 꼬리는 하트 쪽 */
.heart-tip { pointer-events: none; position: fixed; z-index: 30; transform: translateY(-50%); background: var(--text); color: var(--bg); border: 0; border-radius: 14px; padding: 9px 13px; font: inherit; font-size: .88rem; line-height: 1.45; text-align: left; box-shadow: 0 8px 22px rgba(0,0,0,.25); animation: pill-in .2s ease-out; }
.heart-tip b { font-family: var(--font-display); font-weight: 400; color: var(--pink); }
.heart-tip::after { content: ""; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-right: 0; border-left-color: var(--text); }
/* 칸·줄 정렬 점검(games_extreme 정렬 검사)에서 나온 것 — 2026-10-01 */
.qt-nums { flex-wrap: wrap; row-gap: 0; }   /* 조각보: 큰 글자면 "시간·수입" 숫자가 조각 카드 밖으로 넘쳐 옆 카드와 겹쳤다 — 두 줄로 */
.ex-pile small, .ex-deck small { font-size: min(.75rem, 12px); }   /* 탐험대 "더미 32장" 이 칸보다 넓었다 */
.ex-deck { min-width: 48px; }
.gs .pw .parts { font-size: min(.75rem, 11.5px); }   /* 보석상 할인·보석 수 — 큰 글자에서 칸 밖으로 */
.rm-people { min-width: 0; overflow: hidden; }   /* 루미루미 옆 이름 칸이 2px 넘쳤다 */
.rm-person { max-width: 100%; }
/* 쿼리도 상태 줄: 큰 글자면 넓은 폰에서도 "골까지 9걸음" 이 화면 밖으로 밀리고 이름이 사라졌다 — 사람마다 두 줄로 접는다 */
.qd-score .p { flex-wrap: wrap; row-gap: 0; max-width: 49%; }
.qd-score .p b { flex: 0 1 auto; max-width: calc(100% - 20px); }
/* 게임 고르기 창 — 카드를 누르면 아래에서 올라온다 (설명·옵션·시작을 한데) */
.pick-back { position: fixed; inset: 0; z-index: 24; background: rgba(74, 59, 68, .35); animation: fade .18s; }
.pick-sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 25; width: 100%; max-width: inherit; max-height: 82dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.2); padding: 16px 16px calc(14px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 10px; animation: sheet-up .22s ease-out; }
.pick-sheet { max-width: 480px; }
@media (min-width: 720px) { .pick-sheet { max-width: clamp(480px, calc((100dvh - 120px) * .85), 600px); } }   /* 앱 기둥 폭과 같게 */
@keyframes sheet-up { from { transform: translate(-50%, 40px); opacity: 0; } }
.pick-sheet .ps-head { display: flex; align-items: center; gap: 10px; }
.pick-sheet .ps-head .gicon { width: 46px; height: 46px; flex: none; }
.pick-sheet .ps-name { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
.pick-sheet .pick-info { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 10px 12px; font-size: .9rem; }
.pick-sheet #game-options { margin: 0; }
.pick-sheet .ps-start { position: sticky; bottom: calc(-14px - var(--safe-bottom)); background: var(--bg); padding-top: 4px; }
@media (prefers-reduced-motion: reduce) { .pick-sheet, .pick-back { animation: none; } }
#rules-overlay { z-index: 28; }   /* 고르기 창(25)에서 "규칙 보기"를 눌러도 그 위에 뜨게 — 전엔 고르기 창 뒤에 깔려 안 보였다 */
/* 아이폰 키보드가 떠 있으면 대화상자·채팅 창을 보이는 영역(키보드 위)에 맞춘다 — 화면 전체가 밀려 올라가지 않게 */
html.kb-open .dlg-back { top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100%); }
html.kb-open .chat-sheet { top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100%); }

/* ── 튜토리얼 (client/tutorial.js) ── 진짜 게임 화면 위에 어둡게 가리고, 누를 곳만 밝혀 한 수씩 안내한다 */
#tut { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; min-height: 0; padding: 0; }
#tut .tut-top { flex: none; padding: calc(8px + var(--safe-top)) 16px 4px; display: flex; justify-content: center; }
#tut .tut-prog { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
#tut .tut-prog i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
#tut .tut-prog i.on { background: var(--pink); }
#tut .tut-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; z-index: 1; }   /* 게임 안의 떠 있는 창(도망자 놓기 창·루미루미 전체 화면)도 어둡게 가림·말풍선 아래로 */
#tut .tut-scroll .stage { padding-bottom: 240px; }
#tut .tut-app { min-height: 0; padding-top: 0; }   /* 앱 기둥과 같은 폭(#app 규칙을 같이 받는다) — 가로 화면에서 판이 화면 폭 전체로 커지지 않게 */
#tut .tut-dim { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
#tut .tut-shade { fill: rgba(40, 30, 36, .5); }
#tut .tut-shade.strong { fill: rgba(40, 30, 36, .8); }
#tut .tut-rings i { position: fixed; z-index: 3; border: 3px solid var(--pink); border-radius: 12px; box-shadow: 0 0 0 4px rgba(255, 143, 171, .35); pointer-events: none; }
#tut.idle .tut-rings i { animation: tut-pulse 1s ease-in-out infinite; }
@keyframes tut-pulse { 50% { box-shadow: 0 0 0 10px rgba(255, 143, 171, .55); } }
#tut .tut-bub { position: fixed; z-index: 4; left: 12px; right: 12px; bottom: calc(14px + var(--safe-bottom)); max-width: 520px; margin: 0 auto; background: var(--text); color: var(--bg); border-radius: 18px; padding: 12px 14px 10px; font-size: 1rem; line-height: 1.5; box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
#tut .tut-bub.top { bottom: auto; top: calc(28px + var(--safe-top)); }
#tut.wide .tut-app { margin-left: 16px; margin-right: auto; }
#tut.wide .tut-bub.side-r { width: var(--tut-side, 320px); bottom: auto; top: 50%; transform: translateY(-50%); }
#tut.wide .tut-bub.side-r.shake { animation: none; }
#tut.wide .tut-scroll .stage { padding-bottom: 40px; }
#tut .tut-bub.side-r, #tut .tut-bub.side-l { width: 320px; margin: 0; } #tut .tut-bub.side-r { left: auto; right: 12px; } #tut .tut-bub.side-l { right: auto; left: 12px; }
#tut .tut-bub.shake { animation: tut-shake .35s; }
@keyframes tut-shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
#tut .tut-say b, #tut .tut-tip b { font-family: var(--font-display); font-weight: 400; color: var(--pink); }
#tut .tut-tag { display: inline-block; font-family: var(--font-display); font-size: .78rem; padding: 0 9px; border-radius: 999px; margin: 0 0 4px; }
#tut .tut-tag.then { background: #14342A; color: #8FE0B8; } #tut .tut-tag.no { background: #3A1E24; color: #FF9A9A; }
#tut .tut-tag.foe { background: #2A2340; color: #C3A6F2; } #tut .tut-tag.tip { background: #3A2F18; color: #FFD68A; margin-right: 6px; }
html.dark #tut .tut-tag.then { background: #E0F7EC; color: #2F8C66; } html.dark #tut .tut-tag.no { background: #FDE3E6; color: #C9405A; }
html.dark #tut .tut-tag.foe { background: #EFE7FC; color: #7A5BC0; } html.dark #tut .tut-tag.tip { background: #FFF3D1; color: #8A5A12; }
#tut .tut-tip { margin-top: 6px; font-size: .92rem; opacity: .95; }
#tut .tut-hint { margin-top: 6px; color: #FFD166; font-family: var(--font-display); font-size: .9rem; }
html.dark #tut .tut-hint { color: #B07A00; }
#tut .tut-hint[hidden] { display: none; }
#tut .tut-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
#tut .tut-nav > span { display: flex; gap: 8px; }
#tut .tut-nav button { border: 0; font-family: var(--font-display); font-size: .92rem; border-radius: 999px; padding: 6px 14px; min-height: 36px; cursor: pointer; }
#tut .tut-skip { background: none; color: inherit; opacity: .7; padding-left: 0 !important; }
#tut .tut-prev { background: rgba(255, 255, 255, .14); color: inherit; }
html.dark #tut .tut-prev { background: rgba(0, 0, 0, .1); }
#tut .tut-prev:disabled { opacity: .35; }
#tut .tut-next { background: var(--pink); color: #fff; }
#tut .tut-next.off { opacity: .35; }
#tut .tut-bub.wait .tut-next { opacity: .35; }
#tut .tut-card { position: fixed; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 20px; }
#tut .tut-card[hidden] { display: none; }
#tut .tut-card-box { width: 100%; max-width: 380px; background: var(--card); color: var(--text); border-radius: 26px; padding: 24px 20px 16px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); animation: pop2 .22s ease-out; }
#tut .tut-kicker { font-family: var(--font-display); color: var(--pink-dark); font-size: .85rem; background: var(--pink-soft); padding: 2px 12px; border-radius: 999px; }
#tut .tut-card-box h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.4; margin: 0; text-wrap: balance; }
#tut .tut-card-box p { margin: 0; color: var(--muted); font-size: .95rem; }
#tut .tut-card-box b { font-family: var(--font-display); font-weight: 400; color: var(--pink-dark); }
#tut .tut-go { width: 100%; margin-top: 6px; }
#tut .tut-skip-link { background: none; border: 0; color: var(--muted); font-size: .9rem; text-decoration: underline; padding: 6px; cursor: pointer; }
#tut .tut-sum { text-align: left; margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; width: 100%; }
#tut .tut-ends { width: 100%; display: flex; flex-direction: column; gap: 6px; }
#tut .tut-end { display: flex; gap: 10px; align-items: baseline; text-align: left; background: var(--tint); border-radius: 12px; padding: 8px 12px; font-size: .92rem; }
#tut .tut-end b { flex: none; min-width: 3em; }
#tut .tut-end.win b, #tut .tut-end.clear b { color: var(--mint-dark); } #tut .tut-end.lose b, #tut .tut-end.fail b { color: var(--red); }
#tut .tut-end-row { display: flex; gap: 8px; width: 100%; } #tut .tut-end-row .btn { flex: 1; }
#tut.foe-view .tut-top { flex-direction: column; align-items: center; gap: 4px; }
#tut.foe-view .tut-top::after { content: '연습 상대 화면이에요'; position: static; background: #C3A6F2; color: #2A2340; font-family: var(--font-display); font-size: .85rem; padding: 2px 12px; border-radius: 999px; z-index: 6; }
#tut.foe-view { box-shadow: inset 0 0 0 4px #C3A6F2; }
body.tut-on #heart-fab, body.tut-on #heart-menu, body.tut-on #heart-back, body.tut-on .heart-tip, body.tut-on #fab-chat, body.tut-on #coach-ring, body.tut-on #coach-bubble { display: none !important; }
@media (prefers-reduced-motion: reduce) { #tut .tut-bub.shake, #tut.idle .tut-rings i, #tut .tut-card-box { animation: none; } }

/* 튜토리얼로 들어가는 곳 — 고르기 창의 "처음이면 튜토리얼 먼저"(크게)·"튜토리얼 다시 보기"(작게), 설명서 창 버튼, 다 본 게임 카드의 체크 */
/* 두던 판: 새로 시작(작게) · 이어서 하기(넓게)를 한 줄에 */
.pick-sheet .ps-two { display: flex; gap: 10px; align-items: stretch; }
.pick-sheet .ps-two .btn { width: auto; min-width: 0; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.pick-sheet .ps-two .ghost { flex: 1 1 0; }
.pick-sheet .ps-two #btn-sheet-resume { flex: 1.7 1 0; display: inline-flex; align-items: center; justify-content: center; }
.pick-sheet .tut-first { display: flex; flex-direction: column; align-items: center; line-height: 1.3; margin-bottom: 8px; }
.pick-sheet .tut-first .tt { display: inline-flex; align-items: center; }
.pick-sheet .tut-first small { font-family: var(--font-body); font-size: .78rem; opacity: .9; }
.pick-sheet .tut-again { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 8px auto 0; background: none; border: 0; color: var(--muted); font: inherit; font-size: .88rem; text-decoration: underline; padding: 6px; cursor: pointer; }
.rules-box .tut-from-rules { align-self: flex-start; margin: 0 0 8px; }
.game-card .gc-tut { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--mint-soft); display: grid; place-items: center; font-style: normal; }
.game-card .gc-tut .uicon { width: 12px; height: 12px; }

/* 루미루미를 세로 폰에서 돌려 볼 때: 튜토리얼 층 전체를 #app 처럼 90° 돌린다(말풍선·밝힘도 같이 돌아간다) */
body.rm-forced #tut { right: auto; bottom: auto; width: var(--rw); height: var(--rh); transform: rotate(90deg) translateY(-100%); transform-origin: top left; }
body.rm-forced #tut .tut-dim, body.rm-forced #tut .tut-rings i, body.rm-forced #tut .tut-bub, body.rm-forced #tut .tut-card { position: absolute; }
body.rm-forced #tut .tut-dim { inset: 0; }
/* 낮은 화면(작은 폰·가로)에선 튜토리얼 말풍선을 조금 작게 — 큰 글씨에서 밝힌 곳에 걸렸다 */
@media (max-height: 600px) { #tut .tut-bub { font-size: .92rem; line-height: 1.42; padding: 9px 12px 7px; } #tut .tut-nav { margin-top: 5px; } #tut .tut-nav button { min-height: 32px; padding: 4px 12px; } }
@media (max-height: 450px) { #tut .tut-bub { font-size: .86rem; } }
/* 튜토리얼 버튼의 누르는 범위 — 보이는 크기(32~36px)는 그대로, 손가락 닿는 범위만 둘레로 넓혀 44px 이상 */
#tut .tut-nav button, #tut .tut-skip-link, #tut .tut-end-row .btn, .pick-sheet .tut-again, .rules-box .tut-from-rules { position: relative; }
#tut .tut-skip-link, .pick-sheet .tut-again { padding: 10px 14px; }
#tut .tut-nav button::after, #tut .tut-skip-link::after, #tut .tut-end-row .btn::after, .pick-sheet .tut-again::after, .rules-box .tut-from-rules::after { content: ''; position: absolute; inset: -6px -4px; }
@media (max-height: 600px) { #tut .tut-nav button::after { inset: -7px -4px; } }
/* 주소 이사 안내 (move.js) — 홈 화면 앱으로 예전 주소를 쓰는 사람에게 */
.move-dlg { text-align: left; display: flex; flex-direction: column; gap: 10px; }
.move-dlg h2 { margin: 0; font-family: var(--font-display); font-weight: normal; color: var(--pink-dark); text-align: center; }
.move-addr { margin: 0; text-align: center; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .02em; }
.move-dlg > p.muted { margin: 0; text-align: center; font-size: .9rem; }
.move-steps { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; line-height: 1.45; }
.move-link { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--tint); font-size: .8rem; word-break: break-all; user-select: all; -webkit-user-select: all; }