/* 마작 솔리테어: 공용 /common/nin.css(토큰·카드·알약·입력칸·모달) 다음에 읽는다.
   메뉴 화면은 다른 게임과 같은 클래스·배치에 커버(cover.svg)의 수묵화 화풍을 입힌다: 한지 · 먹 번짐 · 먹 산 · 대나무 · 명조 먹 글자 로고 · 빨강 낙관.
   게임 화면(#hud)은 DOM 패: 위 막대 → 온라인 참가자 순위 띠(#racers, 가로 한 줄) → 판(#board-wrap 안의 #board 를 main.js 가 scale) → 도구 줄
   · #stuck 막힘 창 · #ready 준비 숫자 · #fx 연출 판. 패는 render.js 의 button.tile (판 좌표 56×74px, 층마다 왼쪽 위로 떠서 오른쪽·아래 두께 그림자).
   nin.css 의 .card(흰 카드 상자)는 메뉴·창에서만 쓴다. */
/* 화풍: 커버(cover.svg)의 수묵화·낙관 — 한지 바탕 · 먹 번짐 · 먹선 테두리 · 청록 패 등 · 빨강 네모 낙관. 팔레트는 --p-* 한곳에 */
:root {
  --p-paper: #f6ead2; --p-paper2: #efe5cd; --p-ivory: #fbf6ea; --p-ink: #1d1b18; --p-ink2: #5b5346; --p-wash: #8e8a80;
  --p-teal: #2b7a5b; --p-teal-d: #1b5640; --p-seal: #b8322a; --p-seal-d: #7d1f19; --p-sun: #c8553d; --p-ochre: #e3c27a; --p-ochre-d: #a8873e;
  --p-blue: #2a5d9f; --p-bone: #d9cfb7;
  --brush: 16px 24px 13px 27px / 24px 13px 27px 16px; /* 붓 자국처럼 들쭉날쭉한 모서리 */
  --red: var(--p-seal); --red-d: var(--p-seal-d);   /* 주 버튼(다음 ▶ · 혼자 하기 · 시작) = 낙관 빨강 */
  --blue: var(--p-teal); --blue-d: var(--p-teal-d); /* 보조(방 만들기 · 섞기 · 입력칸 테두리) = 청록 */
  --yellow: var(--p-ochre); --yellow-d: var(--p-ochre-d);
  --green: var(--p-teal); --green-d: var(--p-teal-d);
  --ink: var(--p-ink); --sub: var(--p-ink2);
  --sky1: var(--p-paper); --sky2: var(--p-paper2);
  --shade: #5b534633; --shade-far: #5b534622;
  --card-sh: 3px 4px 0 var(--p-bone), 5px 7px 0 var(--p-teal), 8px 14px 18px #5b534633;
  --txt-sh: transparent;
  --cream: var(--p-ivory);
  --logo: "Songti SC", "STSong", "Noto Serif KR", "Noto Serif CJK KR", "AppleMyungjo", "Nanum Myeongjo", "Times New Roman", Georgia, serif;
  --cr: var(--p-seal); --cy: #c08a2a; --cg: var(--p-teal); --cb: var(--p-blue); /* 자리 색 */
  --tile: var(--p-ivory); --tile-side: var(--p-bone); --tile-edge: var(--p-teal); /* 패 앞면 · 옆면 · 아래(청록 등) */
  --e-out: cubic-bezier(.22, .8, .26, 1); --e-back: cubic-bezier(.34, 1.56, .64, 1);
  /* 한지 바탕: 먹 번짐 몇 겹 + 해 번짐 + 가는 섬유 결 */
  --hanji:
    radial-gradient(ellipse 34% 26% at 82% 16%, #c8553d40, #c8553d18 55%, transparent 72%),
    radial-gradient(ellipse 60% 42% at 8% 92%, #8e8a8033, transparent 70%),
    radial-gradient(ellipse 48% 30% at 96% 88%, #5e5a5230, transparent 72%),
    radial-gradient(ellipse 40% 26% at 30% 6%, #8e8a801c, transparent 70%),
    repeating-linear-gradient(176deg, #8a6a3c08 0 2px, transparent 2px 7px),
    radial-gradient(ellipse 90% 80% at 50% 50%, var(--p-paper) 55%, #e6d6b4);
}
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: var(--p-paper); color: var(--p-ink);
  font-family: ui-rounded, "Arial Rounded MT Bold", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.hidden { display: none !important; }
.c-r { --c: var(--cr); } .c-y { --c: var(--cy); } .c-g { --c: var(--cg); } .c-b { --c: var(--cb); }

/* ---------- 게임 화면 ---------- */
#hud {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom)); font-family: var(--ui); overflow: hidden;
  background: var(--hanji); color: var(--p-ink);
}
#hud > .boardtop, #hud > #racers, #hud > .table, #hud > .tools { width: 100%; max-width: 1400px; }
/* 위 막대: 한지 띠 + 먹선 테두리, 왼쪽 끝 낙관 */
.boardtop {
  display: flex; align-items: center; gap: 10px; flex: none;
  background: var(--p-ivory); color: var(--p-ink); font-size: 16px; padding: 5px 8px 5px 6px; border-radius: var(--brush);
  border: 1.5px solid var(--p-ink); box-shadow: 2px 3px 0 #5b534630;
}
.boardtop .stat { white-space: nowrap; }
.boardtop .stat b { font-weight: normal; color: var(--p-seal); font-size: 19px; font-family: var(--logo); font-weight: 700; }
#timer { min-width: 76px; text-align: center; font-size: 17px; font-weight: normal; background: var(--p-ink); color: var(--p-ivory); border-radius: 6px 12px 7px 13px; padding: 0 10px; }
#timer.low { background: var(--p-seal); color: #fff; }
#hud-mode { flex: 1; text-align: right; font-size: 11px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfx { flex: none; border: 1px solid #1d1b1840; background: #1d1b1810; color: var(--p-ink); border-radius: 50%; width: 30px; height: 30px; padding: 0; font-size: 15px; cursor: pointer; }
/* 낙관: 빨강 네모 도장 안 흰 글자 (로고 옆 · 위 막대 왼쪽) */
.seal {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  font-family: var(--logo); font-weight: 700; line-height: 1.05; color: #f6ead2; background: var(--p-seal);
  border-radius: 3px 4px 2px 5px; box-shadow: inset 0 0 0 2px #f6ead255, inset 0 0 6px #7d1f1980; rotate: 2deg;
}
.boardtop .seal { width: 26px; height: 26px; font-size: 17px; rotate: -3deg; }
.sfx.off { opacity: .5; }

/* 판: 남는 높이 전부 (#board-wrap 크기가 바뀌면 main.js 가 ResizeObserver 로 다시 scale) */
.table { flex: 1; min-height: 0; display: flex; }
#board-wrap { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
#board { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* 패: 크림 앞면 + 오른쪽·아래 두께(두 겹 그림자) · 층이 높을수록 그림자가 조금 더 퍼진다. 열린 패는 밝게, 막힌 패는 살짝 어둡게 */
.tile {
  position: absolute; width: 56px; height: 74px; padding: 0; margin: 0; border: 0; border-radius: 8px; cursor: default; font: inherit;
  background: linear-gradient(135deg, #fffdf5 0%, var(--tile) 50%, #efe6d0 100%);
  box-shadow: inset 0 0 0 1px var(--p-ink2), 3px 3px 0 var(--tile-side), 5px 6px 0 var(--tile-edge), 6px 8px calc(6px + var(--z) * 2px) #3a2a1650;
  transition: filter .18s var(--e-out), translate .18s var(--e-back), box-shadow .18s var(--e-out);
  filter: brightness(.82) sepia(.3) saturate(.7);
}
.tile .face { position: absolute; inset: 4px 5px 5px 4px; display: block; }
.tile svg { width: 100%; height: 100%; display: block; }
.tile.free { filter: none; cursor: pointer; }
.tile.free:hover { translate: 0 -3px; }
/* 고른 패: 낙관 빨강 먹선 + 붉은 번짐 · 힌트: 청록 번짐이 숨 쉬듯 */
.tile.sel { filter: none; translate: 0 -5px; box-shadow: inset 0 0 0 3px var(--p-seal), 0 0 0 2px #b8322a99, 0 0 18px 5px #c8553d88, 3px 3px 0 var(--tile-side), 5px 6px 0 var(--tile-edge); }
.tile.hint { animation: hint .5s ease-in-out infinite alternate; }
@keyframes hint { to { box-shadow: inset 0 0 0 3px var(--p-teal), 0 0 0 2px #2b7a5b99, 0 0 22px 7px #2b7a5b88, 3px 3px 0 var(--tile-side), 5px 6px 0 var(--tile-edge); translate: 0 -3px; } }
.tile.gone { visibility: hidden; pointer-events: none; }

/* 참가자 순위 띠 (위 막대 아래 가로, 온라인): 순위 순 한지 칩 한 줄 — 순위(::before ← data-rank, 1등 낙관 빨강) · 국기+이름 · 남은 패 또는 ✔ 완료 시간(크게) · 점수
   / 아래 자리 색 먹 막대(치운 비율). 나 = 상아 + 먹선 테두리 + 청록 그림자, 다 깸 = 낙관 빨강 글자, 그만둠 = 흐리게 */
#racers { flex: none; display: flex; justify-content: center; gap: 10px; }
#racers:not(.hidden) { min-height: 51px; } /* 칩 높이만큼 미리 잡아 둔다 — 띠 내용이 바뀌어도 판이 안 밀린다 (판이 밀리면 전부 다시 그리고 다시 맞춘다) */
.racer {
  flex: 0 1 260px; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 8px;
  padding: 5px 10px 6px 6px; border-radius: 10px 16px 9px 18px; background: #fbf6eacc; border: 1px solid #5b534680; border-left: 5px solid var(--c);
}
.racer::before {
  content: attr(data-rank); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font: 700 14px var(--logo); color: var(--p-ivory); background: var(--p-ink2); border-radius: 3px 5px 2px 6px;
}
.racer[data-rank="1"]::before { background: var(--p-seal); box-shadow: inset 0 0 0 1.5px #f6ead255; rotate: -4deg; }
.racer.me { background: var(--p-ivory); border-color: var(--p-ink); border-left-color: var(--c); box-shadow: 2px 3px 0 var(--p-teal); }
.racer .rn { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.racer.me .rn { font-weight: bold; }
.racer .rv { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.racer .rv b { font: 700 19px var(--logo); color: var(--p-ink); }
.racer .rv small { font-size: 12px; color: var(--p-ink2); }
.racer .bar { grid-column: 1 / -1; display: block; height: 5px; border-radius: 4px 8px 3px 9px; background: #1d1b1818; overflow: hidden; }
.racer .bar i { display: block; height: 100%; border-radius: inherit; background: var(--c); transition: width .4s var(--e-out); }
.racer.done .rv b { color: var(--p-seal); }
.racer.out { opacity: .55; }

/* 도구 줄 */
.tools { flex: none; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.tools .pill { margin: 0; min-width: 120px; }
.tools .pill b { font-weight: normal; display: inline-block; min-width: 1.4em; padding: 0 4px; border-radius: 999px; background: #0002; }
#toast {
  position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); pointer-events: none; max-width: 92%; z-index: 5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--p-ivory); color: var(--ink); border: 1.5px solid var(--p-ink); border-radius: var(--brush); padding: 4px 18px; font-size: 17px; opacity: 0; transition: opacity .3s var(--e-out);
}
#toast.show { opacity: 1; }
#wait { position: fixed; left: 50%; top: 64px; translate: -50% 0; z-index: 5; pointer-events: none; background: var(--p-ivory); color: var(--ink); border: 1.5px solid var(--p-ink); border-radius: var(--brush); padding: 4px 18px; font-size: 17px; box-shadow: 2px 3px 0 #5b534640; }
/* 막힘 창: 판 위 가운데 (판은 그대로 보인다) */
.stuck { position: fixed; left: 50%; top: 50%; translate: -50% -50%; z-index: 6; width: min(440px, 92vw); }
.stuck .card { display: flex; flex-direction: column; align-items: center; color: var(--ink); line-height: 1.5; animation: popin2 .25s cubic-bezier(.3, 1.5, .5, 1); }
.stuck-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.stuck-row .pill { margin: 0; }
/* 준비 숫자 (온라인 ready) */
#ready { position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #f6ead2cc; color: var(--p-ink); pointer-events: none; font-size: 22px; }
#ready b { font-family: var(--logo); font-size: 120px; line-height: 1; color: var(--p-ink); text-shadow: 0 0 3px #1d1b1866, 4px 5px 0 #1d1b181a; }

/* 연출 판 (#fx): 떠오르는 점수 · 배너 · 반짝이 */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
#fx > * { position: absolute; }
/* 붓글씨: 먹 글자 + 한지색 테두리(종이 위에 번지듯) · 배너는 가로 먹 번짐 띠 위 · 반짝이 대신 먹·주홍 방울 */
.fx-float { font-family: var(--logo); font-weight: 700; font-size: 32px; color: var(--p-seal); -webkit-text-stroke: 5px var(--p-ivory); paint-order: stroke fill; white-space: nowrap; }
.fx-float.combo { color: var(--p-teal); font-size: 28px; }
.fx-float.minus { color: var(--p-ink); font-size: 24px; }
.fx-banner {
  translate: -50% -50%; font-family: var(--logo); font-weight: 700; font-size: 64px; color: var(--p-ink); white-space: nowrap; padding: 6px 90px;
  background: radial-gradient(ellipse 50% 50% at 50% 55%, #fbf6eaf2 55%, #fbf6ea00 100%); text-shadow: 0 0 2px #1d1b1880, 3px 4px 0 #b8322a33;
}
.fx-spark { width: 9px; height: 9px; border-radius: 48% 52% 40% 60%; filter: blur(.4px); }

/* 좁은 화면: 순위 띠는 4칸이 한 줄에 (칸: 순위 · 이름 / 남은 패 · 점수 / 막대) */
@media (max-width: 760px) {
  #hud { gap: 6px; padding: 6px 6px max(6px, env(safe-area-inset-bottom)); }
  .boardtop { font-size: 13px; gap: 6px; padding: 5px 6px 5px 12px; } .boardtop .stat b { font-size: 16px; }
  #timer { min-width: 60px; font-size: 14px; } #hud-mode { font-size: 10px; }
  #racers { gap: 5px; } #racers:not(.hidden) { min-height: 64px; }
  .racer { flex: 1 1 0; grid-template-columns: auto minmax(0, 1fr); gap: 1px 4px; padding: 4px 6px 5px 4px; border-radius: 8px 12px 7px 13px; }
  .racer::before { width: 17px; height: 17px; font-size: 11px; }
  .racer .rn { font-size: 12px; }
  .racer .rv { grid-column: 1 / -1; gap: 4px; line-height: 1.15; overflow: hidden; }
  .racer .rv b { font-size: 15px; } .racer .rv small { font-size: 10px; }
  .racer .bar { height: 4px; margin-top: 2px; }
  .tools { gap: 8px; } .tools .pill { min-width: 0; font-size: 15px; padding: 8px 12px; }
  #toast { bottom: 64px; font-size: 15px; }
  .fx-banner { font-size: 44px; }
}

/* 판 고르기 (혼자 창 · 로비 줄): 그림 · 이름 · 패 수 · 내 최고 */
.layouts { display: flex; gap: 10px; width: 100%; justify-content: center; }
.lay {
  font: inherit; color: var(--ink); cursor: pointer; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border: 1.5px solid var(--p-ink2); border-radius: var(--brush); background: #fffdf5; box-shadow: 2px 3px 0 var(--p-bone), 4px 5px 0 var(--p-teal); line-height: 1.3; transition: transform .08s;
}
.lay:hover:not(:disabled) { border-color: var(--p-ink); transform: translateY(-2px); }
.lay.on { border: 2px solid var(--p-seal); background: #f8e6d6; }
.lay:disabled { cursor: default; }
.lay:disabled:not(.on) { opacity: .55; }
.lay-ic { font-size: 30px; }
.lay b { font-weight: normal; font-size: 19px; }
.lay-n { font-size: 13px; color: var(--sub); }
.lay-best { font-size: 12px; color: #fff; background: var(--p-seal); border-radius: 3px 5px 2px 6px; padding: 0 8px; white-space: nowrap; }
.lay-tip { margin-top: 10px; font-size: 15px; color: var(--p-seal-d); }
#lobby-layouts { width: 460px; max-width: 100%; margin-top: 18px; }
#lobby-layouts .lay { padding: 6px; }
#lobby-layouts .lay-ic { font-size: 22px; }

/* ══ 메뉴 화면: 수묵화 한지 (먹선 테두리 카드 · 붓 자국 알약 · 낙관) — 배치는 다른 게임과 같은 클래스 ══ */
.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  overflow-y: auto; text-align: center; padding: 20px 16px; z-index: 10;
}
.screen.nin, .modal { font-family: var(--ui); text-shadow: none; color: var(--p-ink); line-height: 2; touch-action: manipulation; }
.screen.nin { background: var(--hanji); }
/* 먼 산 두 겹 (커버의 회색 번짐 산) — 화면 아래에 깔리고 글·버튼 뒤로 */
.screen.nin::before {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 38vh; z-index: -1; pointer-events: none; filter: blur(3px);
  background: #8e8a80; opacity: .22;
  clip-path: polygon(0 70%, 12% 52%, 22% 60%, 36% 30%, 47% 48%, 58% 38%, 70% 58%, 80% 20%, 90% 40%, 100% 30%, 100% 100%, 0 100%);
}
.screen.nin::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 22vh; z-index: -1; pointer-events: none; filter: blur(3px);
  background: #5e5a52; opacity: .2;
  clip-path: polygon(0 60%, 16% 30%, 28% 52%, 44% 18%, 56% 46%, 68% 32%, 82% 56%, 100% 26%, 100% 100%, 0 100%);
}
.modal { background: #2a241a8c; }

/* 로고: 커버처럼 굵은 명조 먹 글자 + 아래 기울인 넓은 자간(span) + 붓 밑줄 · 오른쪽 위 낙관 */
.logo-wrap { position: relative; margin: 4px 0 6px; max-width: 100%; padding: 0 44px 14px; }
.logo {
  font-family: var(--logo); font-weight: 700; font-size: 92px; line-height: 1.02; letter-spacing: 1px; color: var(--p-ink);
  text-shadow: 0 0 1.5px #1d1b18cc, 1px 1px 0 #1d1b1855, 3px 4px 6px #5b534633;
}
.logo span { display: block; font-size: .36em; font-style: italic; font-weight: 400; letter-spacing: .32em; margin-top: 4px; opacity: .88; text-shadow: 0 0 1px #1d1b1899; }
/* 붓 밑줄: 가운데 짙고 양끝이 가늘게 빠진다 */
.logo-wrap::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 4px; height: 5px; border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 46% 50%, #1d1b18b0 30%, #1d1b1800 100%); rotate: -1deg;
}
.logo-wrap .seal { position: absolute; right: -2px; top: 8px; width: 38px; height: 82px; font-size: 27px; }
.tagline { font-size: 21px; margin: 40px 0; }
.tagline b { font-weight: normal; color: var(--p-seal); }
/* 왼쪽 대나무 (커버에서 뽑은 인라인 SVG 조각, 넓은 화면에서만) */
.bamboo { position: absolute; left: 2%; bottom: 0; height: 92%; width: auto; max-width: 200px; opacity: .85; pointer-events: none; z-index: -1; }

/* 카드: 상아색 패 앞면 + 먹선 테두리 + 뒤로 비치는 뼈색·청록 패 등 (커버의 패처럼) */
.card { background: var(--p-ivory); color: var(--p-ink); border: 1.5px solid var(--p-ink2); border-radius: 20px 26px 18px 28px / 26px 18px 28px 20px; }
.nin .card, .modal .card {
  box-shadow: var(--card-sh);
  display: flex; flex-direction: column; align-items: center; width: 400px; max-width: 100%;
}
.card-title { margin-bottom: 10px; font-family: var(--logo); font-weight: 700; }
.nin-input { font-size: 22px; padding: 12px 16px; margin-bottom: 10px; background: #fffdf5; border: 1.5px solid var(--p-ink2); border-radius: var(--brush); color: var(--p-ink); }
.nin-input:focus { border-color: var(--p-teal); background: #fff; box-shadow: 0 0 0 3px #2b7a5b30; }
select.nin-input { background-color: #fffdf5; }
/* 알약: 붓 자국 모서리 · 먹선 테두리 · 도장처럼 눌리는 그림자 */
.pill { margin: 14px 0; border: 2px solid #1d1b18d0; border-radius: var(--brush); }
.pill.white { --bg: var(--p-ivory); --sh: #b3a78c; color: var(--p-ink); }
.pill.yellow { --bg: var(--p-ochre); --sh: var(--p-ochre-d); color: var(--p-ink); }
.pill.big { font-size: 26px; padding: 14px 0; }
.screen > .pill.big { width: 340px; max-width: 100%; }
.link { font-size: 21px; padding: 11px 30px; min-height: 50px; margin-top: 16px; color: var(--p-ink); background: #fbf6ea99; border: 1.5px solid var(--p-ink2); border-radius: var(--brush); box-shadow: 0 4px 0 var(--shade); }
.link:hover { background: var(--p-ivory); box-shadow: 0 6px 0 var(--shade); }
.link:active { box-shadow: 0 1px 0 var(--shade); }
.card .link, .modal .link { background: #efe6d0; border-color: var(--p-ink2); box-shadow: 0 4px 0 #b3a78c; }
.msg { min-height: 22px; margin-top: 20px; color: var(--p-seal-d); font-size: 17px; }
.card .msg { color: var(--red-d); }
#name-msg { margin-top: 10px; }
#name-msg:empty { display: none; }
.controls { font-size: 15px; opacity: .85; margin-top: 10px; }
.controls b { font-weight: normal; color: var(--p-teal-d); }

/* 방 목록 위 인사 한 줄: 안녕, 이름! · ◀ 닉네임 바꾸기 */
.hello.small { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 14px; font-size: 22px; line-height: 1.4; margin: -10px 0 12px; }
.hello b { font-weight: normal; color: var(--p-seal); }
.hello .link { font-size: 15px; padding: 4px 14px; min-height: 0; margin: 0; box-shadow: 0 3px 0 var(--shade); }
#rooms > .pill.big { margin: 8px 0; }
.nin h2 {
  font-family: var(--logo); font-weight: 700; font-size: 46px; line-height: 1.15; margin: 0 0 28px; color: var(--p-ink);
  text-shadow: 0 0 1.5px #1d1b18aa, 3px 4px 0 #1d1b1814;
}

/* 방 목록 */
#room-list { width: 520px; max-height: 46vh; overflow-y: auto; gap: 20px; padding: 14px; margin-bottom: 16px; }
#room-list .empty { color: #6b7280; padding: 26px 0; font-size: 18px; }
#room-list button.room {
  font: inherit; color: var(--ink); cursor: pointer; width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  text-align: left; font-size: 19px; padding: 12px 16px; border: 1.5px solid var(--p-ink2); border-radius: var(--brush); background: #fffdf5;
  box-shadow: 2px 3px 0 var(--p-bone); transition: transform .08s;
}
#room-list button.room:hover { border-color: var(--p-ink); transform: translateY(-2px); }
#room-list button.room.full { opacity: .5; cursor: default; transform: none; }
#room-list .rname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#room-list .rhost { font-size: 15px; color: #6b7280; }
#room-list .rcount { font-size: 16px; color: #fff; background: var(--p-teal); border-radius: 4px 8px 3px 9px; padding: 3px 10px; text-align: center; }
.check { display: flex; align-items: center; gap: 8px; margin: 8px 0 28px; font-size: 19px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--blue); }

/* 로비 */
.room-title { font-size: 28px; margin-bottom: 18px; font-family: var(--logo); font-weight: 700; }
.lobby-hint { font-size: 15px; opacity: .9; }
.invite { display: flex; gap: 12px; margin: 28px 0 40px; width: 640px; max-width: 100%; }
.inv-code, .inv-link {
  font: inherit; color: var(--ink); cursor: pointer; border: 1.5px solid var(--p-ink2); border-radius: var(--brush); background: var(--p-ivory);
  box-shadow: 3px 4px 0 var(--p-bone), 5px 7px 0 var(--p-teal); padding: 10px 16px; display: flex; flex-direction: column; align-items: center; gap: 9px;
  transition: transform .08s, box-shadow .08s;
}
.inv-code:hover, .inv-link:hover { transform: translateY(-2px); border-color: var(--p-seal); }
.inv-code:active, .inv-link:active { transform: translateY(3px); box-shadow: 1px 1px 0 var(--p-bone), 2px 2px 0 var(--p-teal); }
.inv-label { font-size: 14px; color: #6b7280; }
.inv-code b { font-family: var(--logo); font-weight: 700; font-size: 46px; letter-spacing: 8px; line-height: 1.1; color: var(--red); }
.inv-link { flex: 1; min-width: 0; }
#lobby-link-text { font-size: 20px; color: var(--blue-d); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-copy { font-size: 15px; color: #fff; background: var(--p-teal); border-radius: 4px 8px 3px 9px; padding: 3px 14px; margin-top: 4px; }
.copied .inv-copy, .inv-code.copied .inv-label { background: var(--red); color: #fff; border-radius: 999px; padding: 3px 14px; }
/* 4칸: 들어온 순서대로 자리 색(빨강·파랑·노랑·초록), 연결 중 칸(깜빡임), 빈 칸은 점선(AI 가 채운다) */
#lobby-players { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 460px; max-width: 100%; }
#lobby-players .pl {
  font-size: 20px; line-height: 1.5; padding: 10px 14px; border-radius: var(--brush); background: var(--c); color: #fff; border: 2px solid var(--p-ink);
  box-shadow: 3px 4px 0 #1d1b1830; text-shadow: 0 1px 0 rgba(0,0,0,.35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#lobby-players .pl.me { outline: 3px solid var(--ink); outline-offset: 2px; }
#lobby-players .pl.empty, #lobby-players .pl.pending { background: #fbf6ea80; color: var(--p-ink2); border: 2px dashed #5b5346a0; box-shadow: none; text-shadow: none; }
#lobby-players .pl.pending { color: var(--p-ink); animation: pl-pulse 1.2s ease-in-out infinite; }
@keyframes pl-pulse { 50% { opacity: .5; } }
#lobby-status { margin: 26px 0 18px; font-size: 18px; }

/* 결과: 혼자 = 판 · 시간 · 점수 · 내 최고 (이름 · 값), 온라인 = 순위표 (순위 · 이름 · 결과 · 점수) */
.res-hero { font-size: 70px; line-height: 1.1; }
.res-title { font-family: var(--logo); font-weight: 700; font-size: 46px; line-height: 1.3; text-shadow: 0 0 1.5px #1d1b18aa; }
#res-table { width: 420px !important; margin: 22px 0 30px; padding: 12px 18px; gap: 4px; line-height: 1.5; }
#res-table .rrow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; width: 100%; font-size: 20px; padding: 6px 10px; border-radius: 14px; }
#res-table .rrow.head { font-size: 14px; color: var(--sub); padding-bottom: 0; }
#res-table .rrow.win { background: #f3e3c0; }
#res-table .rrow.me .rn { color: var(--red-d); }
#res-table .rn { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#res-table .rc { font-size: 16px; color: var(--sub); }
#res-table .rp { font-weight: normal; text-align: right; }
#res-table .rk { text-align: center; }
#res-table .rrow:has(.rk) { grid-template-columns: 34px 1fr auto 56px; }
#res-hint { font-size: 18px; margin: -12px 0 14px; }
.res-row { display: flex; gap: 12px; justify-content: center; flex-wrap: nowrap; margin: 12px 0; }
.res-row .pill { margin: 0; font-size: 22px; padding: 14px 30px; }

/* 모달 */
.modal .card { animation: popin2 .25s cubic-bezier(.3, 1.5, .5, 1); }
#lang-list { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 6px; }
#lang-list .pill { margin: 0; }
.lang-opt.on { --bg: var(--yellow); --sh: var(--yellow-d); color: var(--ink); }

/* 이용약관·개인정보처리방침: 타이틀 화면 오른쪽 아래 구석 */
.legal-links .ll { display: inline-block; white-space: nowrap; }
#title .legal-links { text-align: right; position: absolute; right: 14px; bottom: 10px; margin: 0; color: #5b5346c0; font-size: 13px; line-height: 1.5; }
#title .privacy-link { color: #5b5346c0; text-decoration: underline; }
#title .privacy-link:hover { color: var(--p-ink); }

/* 구석 버튼: 오른쪽 위 언어, 왼쪽 위 Gamepio 홈 · 계정 (포털 아래에서만) */
.corner { position: absolute; top: 14px; right: 14px; margin: 0; z-index: 3; }
.corner-l { position: absolute; top: 14px; left: 14px; z-index: 3; display: flex; gap: 8px; max-width: calc(100% - 180px); }
.corner-l .pill { margin: 0; white-space: nowrap; }
#account-btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 낮은 화면(1280×720 등): 타이틀·로비가 스크롤 없이 */
@media (min-width: 641px) and (max-height: 759px) {
  #title { line-height: 1.5; } #title .logo { font-size: 80px; } #title .tagline { margin: 10px 0 14px; } #title .card { padding: 14px 20px; }
  #title .pill { margin: 8px 0; } #title .nin-input { margin-bottom: 8px; } #name-msg { line-height: 1.4; }
  .invite { margin: 14px 0 18px; } #lobby-players { gap: 10px; } #lobby .lobby-hint { line-height: 1.6; } #lobby-status { margin: 12px 0 8px; }
  #lobby-layouts { margin-top: 10px; } #lobby-layouts .lay { flex-direction: row; justify-content: center; gap: 6px; padding: 4px 6px; } #lobby-layouts .lay-n { display: none; } #lobby-layouts .lay-ic { font-size: 18px; }
}
@media (max-width: 640px) {
  .logo { font-size: 54px; }
  .logo-wrap { padding: 0 34px 12px; } .logo-wrap .seal { width: 28px; height: 60px; font-size: 19px; top: 4px; }
  .bamboo { display: none; }
  #res-table { width: 100% !important; } #res-table .rrow { font-size: 17px; gap: 8px; } #res-table .rrow:has(.rk) { grid-template-columns: 26px 1fr auto 44px; }
  .tagline { font-size: 17px; margin: 24px 0; }
  .nin h2 { font-size: 32px; }
  .link { font-size: 18px; padding: 10px 24px; min-height: 46px; }
  #room-list button.room { font-size: 15px; }
  .invite { flex-direction: column; }
  .inv-code b { font-size: 38px; }
  #lobby-link-text { font-size: 15px; }
  #lobby-players .pl { font-size: 16px; }
  .res-title { font-size: 32px; }
  .res-row { gap: 7px; } .res-row .pill { font-size: 17px; padding: 12px 18px; }
  .corner.pill, .corner-l .pill { font-size: 13px; padding: 7px 12px; } /* .pill.small 보다 구체적이어야 둘 다 같은 크기 */
  .corner { top: 10px; right: 10px; }
  .corner-l { top: 10px; left: 10px; max-width: calc(100% - 130px); }
  #title .logo-wrap { margin-top: 56px; }
  #rooms h2 { margin-top: 30px; } /* 왼쪽 위 포털 버튼 · 오른쪽 위 언어 버튼 아래로 */
  .hello.small { font-size: 18px; }
  #title .legal-links { text-align: center; position: static; margin-top: 4px; font-size: 12px; }
}
/* 메뉴·모달 버튼(공용 nin.css 의 .pill · .link 포함): 눌림·떠오름이 튀듯 (이 파일 끝: 앞의 transition 단축 속성보다 뒤에 와야 이긴다) */
.pill, .link, .inv-code, .inv-link, #room-list button.room, .lay { transition-timing-function: var(--e-back); }
/* 움직임 줄이기: 패 떠오름·힌트 깜빡·버튼 튐 없이 바로 */
@media (prefers-reduced-motion: reduce) {
  .tile, .pill, .link, .lay, #toast, .racer .bar i { transition: none; }
  .tile.hint { animation: none; }
}