/* 원카드: 공용 /common/nin.css(토큰·카드·알약·입력칸·모달) 다음에 읽는다.
   메뉴 화면은 멍멍 똥폭탄·Paper.io style.css 의 메뉴 규칙을 그대로 옮겨 오고(같은 클래스·같은 배치) 색 토큰만 카드 탁자 팔레트(초록 펠트 · 크림 · 빨강/노랑 알약)로 바꾼다.
   게임 화면(#hud)은 DOM 카드: 위 막대 → 탁자(상대 줄 · 버린 더미 · 덱 · 방향 고리 · 토스트) → 내 줄(아바타 · 이름 · 넘기기 · UNO) → 내 손패(부채꼴, 넘치면 가로 스크롤)
   · #fx 연출 판(fx.js 가 그 안에 날아가는 카드·배너·파티클을 만든다). 카드 크기 = --w (88px, 모바일 68px, 더미는 ×1.15).
   nin.css 의 .card(흰 카드 상자)와 이름이 같아서 게임 카드 규칙은 모두 #hud .card 로 덮어쓴다. */
:root {
  --red: #e0413a; --red-d: #a32620;          /* 주 버튼(다음 ▶ · 혼자 하기 · 시작) */
  --blue: #2c7be5; --blue-d: #1b559a;        /* 보조(온라인 · 방 만들기 · 입력칸 테두리) = 카드 파랑 */
  --yellow: #ffd23f; --yellow-d: #d9a400;
  --sky1: #2f8f5b; --sky2: #0f3d2a;          /* 메뉴 배경 그라데이션 (펠트 초록 → 짙은 초록) */
  --shade: #06221540; --shade-far: #03140c40; /* 카드·알약 그림자 */
  --txt-sh: #0f3d2a;                          /* 흰 글씨 그림자 */
  --card-sh: 0 4px 0 var(--shade), 0 10px 18px var(--shade-far);
  --cream: #fbf3dc;
  --cr: #e5383b; --cy: #f2b705; --cg: #2fa35a; --cb: #2c7be5; --cw: #26262e; /* 카드 4색 + 와일드 */
}
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: var(--sky2); color: #fff;
  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); }

/* ---------- 게임 화면 ---------- */
@property --p { syntax: '<number>'; inherits: true; initial-value: 1; } /* 차례 타이머 고리 (남은 비율, 1초씩 부드럽게 줄어든다) */
#hud {
  --w: 88px;                                  /* 손패 카드 폭 (더미는 ×1.15) */
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom)); font-family: var(--ui); overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #2f8f5b, #145034 62%, #0b3020);
}
#hud > * { width: 100%; max-width: 900px; }
.boardtop {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex: none;
  background: #0a2b1c; color: var(--cream); font-size: 14px; padding: 6px 8px 6px 16px; border-radius: 999px; letter-spacing: .3px;
}
.boardtop span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud-mode { text-align: right; font-size: 11px; opacity: .8; }
#hud.my-turn #turn-label { color: var(--yellow); }
#timer { min-width: 64px; text-align: center; font-size: 17px; font-weight: normal; background: var(--cream); color: var(--ink); border-radius: 999px; padding: 0 10px; }
#timer:empty { visibility: hidden; }
#timer.low { background: var(--red); color: #fff; }
.sfx { flex: none; border: 0; background: #ffffff1c; color: #fff; border-radius: 50%; width: 28px; height: 28px; padding: 0; font-size: 15px; cursor: pointer; }
.sfx.off { opacity: .5; }

.table { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; gap: 6px; }

/* 아바타 (상대 · 나): 자리 색 원 + 차례면 고리(--p = 남은 시간 비율, 사람 차례만 줄어든다)가 맥박치듯 빛난다 */
.av {
  --d: 50px; position: relative; flex: none; width: var(--d); height: var(--d); border-radius: 50%; display: grid; place-items: center;
  font-size: calc(var(--d) * .48); background: var(--c, #555); border: 3px solid #fff; box-shadow: 0 3px 0 #0004;
}
.av::before {
  content: ''; position: absolute; inset: -9px; border-radius: 50%; opacity: 0; transition: opacity .2s, --p 1s linear;
  background: conic-gradient(var(--rc, var(--yellow)) calc(var(--p) * 360deg), #ffffff30 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}
.turn > .av::before, .av.turn::before { opacity: 1; animation: ringpulse 1s ease-in-out infinite; }
.av.low { --rc: var(--red); }
@keyframes ringpulse { 50% { filter: drop-shadow(0 0 8px var(--yellow)); transform: scale(1.06); } }
.av .tsec { position: absolute; bottom: -9px; right: -14px; font-style: normal; font-size: 12px; line-height: 1.5; padding: 0 6px; border-radius: 999px; background: var(--cream); color: var(--ink); }
.av .tsec:empty { display: none; }

/* 상대: 아바타 · 국기+이름 · 뒷면 부채(최대 7장) + 장수 배지 · UNO 표시 · 잡기 버튼 */
#opps { display: flex; justify-content: center; gap: 10px; width: 100%; }
.opp {
  position: relative; flex: 1 1 0; min-width: 0; max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px 8px; border-radius: 18px; background: #ffffff10; transition: background .2s;
}
.opp.turn { background: #ffffff26; }
.opp.out { opacity: .45; }
.nm { font-size: 15px; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 34px; padding-right: 12px; }
.count .back, #hud .card.back { background: repeating-linear-gradient(45deg, #b4231c 0 5px, #d2402f 5px 10px); }
.count .back {
  flex: none; width: 20px; height: 30px; margin-left: -12px; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 2px 0 #0003;
  transform-origin: 50% 120%; rotate: calc((var(--i) - var(--m)) * 9deg);
}
.count .back:first-child { margin-left: 0; }
.count b { position: absolute; right: -8px; bottom: -4px; font-size: 14px; font-weight: normal; line-height: 22px; min-width: 22px; padding: 0 4px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 2px 0 #0003; }
.opp .uno { position: absolute; top: -8px; right: -4px; font-size: 12px; line-height: 1.6; padding: 0 8px; border-radius: 999px; background: var(--yellow); color: var(--ink); transform: rotate(8deg); }
.opp .catch {
  font: inherit; font-size: 14px; line-height: 1.4; border: 0; border-radius: 999px; padding: 3px 12px; cursor: pointer;
  background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-d); animation: pulse .7s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.1); } }

/* 가운데: 버린 더미(최근 4장이 어지럽게 · 지금 색 빛) + 방향 고리 + 고른 장수 ×N + 내기 · 오른쪽 덱(남은 장수 동그라미) */
.center { display: flex; align-items: center; justify-content: center; gap: 30px; }
#pile-wrap { --pw: calc(var(--w) * 1.15); position: relative; width: calc(var(--pw) * 1.6); height: calc(var(--pw) * 1.9); display: grid; place-items: center; }
#discard { --g: #fff; position: relative; width: var(--pw); height: calc(var(--pw) * 1.5); }
#discard::before { content: ''; position: absolute; inset: -16% -34%; border-radius: 50%; background: radial-gradient(closest-side, var(--g), transparent); opacity: .55; }
#discard[data-color=r] { --g: var(--cr); } #discard[data-color=y] { --g: var(--cy); } #discard[data-color=g] { --g: var(--cg); } #discard[data-color=b] { --g: var(--cb); }
#hud #discard .card { --w: var(--pw); position: absolute; left: 0; top: 0; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)); box-shadow: 0 4px 10px #0005; }
#discard.glow::before { animation: glow 1.2s ease-in-out 2; }
@keyframes glow { 50% { opacity: 1; transform: scale(1.12); } }
#pile-wrap.ready #discard { cursor: pointer; }
.dir { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: .18; }
.dir span { display: block; font-size: calc(var(--pw) * 2); line-height: 1; color: #fff; animation: dirspin 16s linear infinite; }
.dir.ccw span { animation-direction: reverse; }
@keyframes dirspin { to { rotate: 360deg; } }
#stack-n {
  position: absolute; left: 50%; top: 0; z-index: 2; translate: -50% 0; font-family: var(--logo); font-size: 26px; line-height: 1.2; padding: 0 12px;
  border-radius: 999px; background: var(--yellow); color: var(--ink); box-shadow: 0 3px 0 var(--yellow-d); animation: bounce .35s cubic-bezier(.3, 1.8, .5, 1);
}
@keyframes bounce { from { scale: .3; } }
#play-btn { position: absolute; left: 50%; bottom: 0; z-index: 2; translate: -50% 0; margin: 0; animation: bounce .3s cubic-bezier(.3, 1.8, .5, 1); }
.pill.green { --bg: var(--cg); --sh: #1d6e3b; color: #fff; }
#deck { position: relative; font: inherit; color: #fff; border: 0; background: none; padding: 0; cursor: default; width: var(--w); height: calc(var(--w) * 1.5); }
#hud #deck .card { position: absolute; left: 0; top: 0; rotate: 6deg; box-shadow: 0 4px 0 #0004; }
#hud #deck .card + .card { rotate: -3deg; translate: -3px -3px; }
#deck.ok { cursor: pointer; }
#hud #deck.ok .card + .card { box-shadow: 0 0 0 4px var(--yellow), 0 0 22px var(--yellow); }
#deck-n {
  position: absolute; right: -14px; bottom: -10px; z-index: 1; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  font-size: 15px; font-weight: normal; background: #fff; color: var(--ink); box-shadow: 0 3px 0 #0004;
}
#hint { position: absolute; left: 50%; top: 2px; translate: -50% 0; width: auto; max-width: 96%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; padding: 2px 14px; border-radius: 10px; background: #fff3d6; color: #8a4b00; box-shadow: 0 3px 0 #0003; z-index: 3; animation: bounce .35s cubic-bezier(.3, 1.8, .5, 1); }
#toast {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); pointer-events: none; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--cream); color: var(--ink); border-radius: 999px; padding: 4px 18px; font-size: 17px; opacity: 0; transition: opacity .25s;
}
#toast.show { opacity: 1; }

/* 카드: 색 바탕 · 흰 타원 · 큰 글자(숫자 · ⊘ · ⇄ · +2 · +4 · ✶) · 모서리 작은 글자. 와일드는 4색 타원. 크기 = --w */
#hud .card {
  --cc: var(--cw); position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.5); padding: 0; margin: 0;
  display: grid; place-items: center; overflow: hidden; font: inherit; color: #fff; cursor: default;
  background: var(--cc); border: calc(var(--w) * .05) solid #fff; border-radius: calc(var(--w) * .14); box-shadow: 0 3px 0 #0005;
}
#hud .card[data-color=r] { --cc: var(--cr); } #hud .card[data-color=y] { --cc: var(--cy); }
#hud .card[data-color=g] { --cc: var(--cg); } #hud .card[data-color=b] { --cc: var(--cb); }
#hud .card .oval { width: 84%; height: 64%; border-radius: 50%; background: #fff; transform: rotate(-28deg); display: grid; place-items: center; }
#hud .card .oval b { transform: rotate(28deg); color: var(--cc); font-family: var(--logo); font-weight: 700; font-size: calc(var(--w) * .4); line-height: 1; }
#hud .card[data-color=w] .oval { background: conic-gradient(var(--cr) 0 25%, var(--cb) 0 50%, var(--cy) 0 75%, var(--cg) 0); }
#hud .card[data-color=w] .oval b { color: #fff; -webkit-text-stroke: 2px var(--cw); paint-order: stroke fill; }
#hud .card i { position: absolute; font-style: normal; font-size: calc(var(--w) * .2); line-height: 1; }
#hud .card .tl { top: 4px; left: 5px; }
#hud .card .br { bottom: 4px; right: 5px; transform: rotate(180deg); }
#hud .card.hold { visibility: hidden; }

/* 내 줄 */
.mybar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: none; padding: 0 8px; }
.mybar .av { --d: 38px; }
#my-name { flex: 1; min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mybar .pill { margin: 0; }
#uno-btn.on { --bg: var(--red); --sh: var(--red-d); color: #fff; }

/* 손패: 아래 부채꼴 (겹침 --ov 는 main.js 가 폭에 맞춰 정한다, 다 못 들어가면 가로 스크롤). 카드마다 --a 기울기 · --dy 곡선.
   내 차례: 낼 수 있는 카드 .ok 는 14px 떠오르며 빛나고 나머지는 어둡게, 고른 카드 .sel 은 똑바로 더 높이, 방금 뽑은 카드 .new 는 노랗게 */
#hand { --ov: 30px; display: flex; flex: none; overflow-x: auto; overflow-y: hidden; padding: 46px 16px 22px; justify-content: safe center; touch-action: pan-x; scrollbar-width: thin; }
#hand .card {
  --lift: 0px; transform-origin: 50% 130%; rotate: var(--a, 0deg); translate: 0 calc(var(--dy, 0px) - var(--lift));
  transition: translate .15s, rotate .15s, filter .15s, box-shadow .15s; box-shadow: -3px 3px 8px #0004;
}
#hand .card + .card { margin-left: calc(var(--ov) * -1); }
#hud.my-turn #hand .card:not(.ok):not(.sel) { filter: brightness(.55) saturate(.7); }
#hud.my-turn #hand .card.ok { --lift: 14px; cursor: pointer; box-shadow: 0 0 0 3px #fffa, 0 0 18px #fffb; }
#hud.my-turn #hand .card.ok:hover { --lift: 22px; }
#hand .card.sel { --lift: 36px !important; rotate: 0deg; cursor: pointer; box-shadow: 0 0 0 4px var(--yellow), 0 0 20px var(--yellow) !important; }
#hand .card.new { box-shadow: 0 0 0 3px var(--yellow), 0 0 16px var(--yellow); }
#hand.pulse { animation: handpulse .7s ease-out; }
@keyframes handpulse { 40% { filter: drop-shadow(0 0 14px var(--yellow)); } }

/* 와일드 색 고르기: 더미 자리(--x, --y)에 4색 다이아 (2×2 를 45° 돌린다). 고르면 모두 그 색(--pick)이 되며 작아져 사라진다 */
.cmodal { position: fixed; inset: 0; z-index: 20; background: #0003; }
.cpicks {
  --s: 62px; position: absolute; left: var(--x, 50%); top: var(--y, 50%); display: grid; grid-template-columns: var(--s) var(--s); gap: 6px;
  transform: translate(-50%, -50%) rotate(45deg); animation: dpop .3s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes dpop { from { transform: translate(-50%, -50%) rotate(45deg) scale(.2); opacity: 0; } }
.cpick {
  width: var(--s); height: var(--s); border: 0; border-radius: 10px; cursor: pointer; background: var(--c); padding: 0;
  box-shadow: inset 0 -6px 0 #0003, inset 0 4px 0 #fff5, 0 6px 10px #0005; transition: transform .1s, background .15s;
}
.cpick:hover { transform: scale(1.1); }
.cpick[data-color=r] { --c: var(--cr); } .cpick[data-color=y] { --c: var(--cy); } .cpick[data-color=g] { --c: var(--cg); } .cpick[data-color=b] { --c: var(--cb); }
.cmodal.picked { pointer-events: none; background: none; }
.cmodal.picked .cpick { background: var(--pick); }
.cmodal.picked .cpicks { transition: transform .2s .12s, opacity .2s .12s; transform: translate(-50%, -50%) rotate(45deg) scale(.4); opacity: 0; }

/* 연출 판 (fx.js): 게임 화면 전체를 덮고 누를 수 없다. 요소의 left/top = 가운데 (카드는 왼쪽 위) */
#fx { position: absolute; inset: 0; max-width: none; pointer-events: none; z-index: 15; overflow: hidden; }
.fx { position: absolute; pointer-events: none; }
#hud .fx-card { margin: 0; z-index: 2; box-shadow: 0 8px 16px #0006; }
.fx-pop { font-family: var(--logo); font-weight: 700; font-size: 44px; line-height: 1; white-space: nowrap; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; z-index: 4; }
.fx-pop.gold { color: var(--yellow); -webkit-text-stroke-color: #8a4b00; }
.fx-pop.red { color: #fff; -webkit-text-stroke-color: var(--red-d); font-size: 50px; text-shadow: 0 0 18px var(--red); }
.fx-pop.uno { font-size: 58px; color: var(--yellow); -webkit-text-stroke: 8px var(--red-d); }
.fx-pop.win { font-size: 30px; padding: 4px 16px; border-radius: 999px; background: var(--yellow); color: var(--red-d); -webkit-text-stroke: 0; box-shadow: 0 4px 0 var(--yellow-d); }
.fx-part { font-size: 22px; line-height: 1; z-index: 3; text-shadow: 0 0 6px currentColor; }
.fx-part.confetti { width: 9px; height: 14px; border-radius: 2px; }
.fx-part.spark { font-size: 18px; }
.fx-ring { width: 120px; height: 120px; border: 8px solid #fff; border-radius: 50%; box-sizing: border-box; }
.fx-vignette { inset: 0; box-shadow: inset 0 0 120px 30px var(--c); }
.fx-banner {
  white-space: nowrap; font-family: var(--logo); font-weight: 700; font-size: 54px; line-height: 1.1; padding: 6px 30px; border-radius: 22px; z-index: 5;
  color: #fff; -webkit-text-stroke: 7px var(--bd); paint-order: stroke fill; background: var(--bg); box-shadow: 0 6px 0 var(--bd), 0 14px 30px #0006;
}
.fx-banner.gold, .fx-banner.combo { --bg: linear-gradient(#ffd23f, #ffb703); --bd: #a35b00; }
.fx-banner.red { --bg: linear-gradient(#ff6b5e, #d7332a); --bd: #7d1510; }
.fx-banner.blue { --bg: linear-gradient(#7fd3ff, #2c7be5); --bd: #12407e; }
.fx-ice {
  border-radius: 50%; display: grid; place-items: center; z-index: 3; color: #0d4a75; font-family: var(--logo); font-weight: 700; font-size: 13px; text-align: center; line-height: 1;
  background: radial-gradient(circle at 35% 30%, #ffffffd0, #bdeaffb0 45%, #5bbcf0a0); border: 3px solid #e8f8ff; box-shadow: 0 0 18px #8fd8ff, inset 0 0 12px #fff;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.fx-ice span { transform: rotate(-10deg); text-shadow: 0 1px 0 #fff; }
.fx-crown { font-size: 54px; line-height: 1; z-index: 5; filter: drop-shadow(0 4px 0 #0004); }
.fx-count { font-family: var(--logo); font-weight: 700; font-size: 64px; line-height: 1; color: var(--yellow); -webkit-text-stroke: 7px #8a4b00; paint-order: stroke fill; text-shadow: 0 5px 0 #0004; z-index: 4; transform: translate(-50%, -50%); }

@media (max-width: 640px) {
  #hud { --w: 68px; gap: 4px; }
  .boardtop { font-size: 12px; padding: 5px 6px 5px 12px; }
  #opps { gap: 6px; }
  .opp { padding: 10px 2px 6px; border-radius: 14px; }
  .opp .av { --d: 36px; }
  .nm { font-size: 12px; }
  .count { scale: .8; }
  .center { gap: 22px; }
  #hand { padding: 40px 10px 18px; }
  .cpicks { --s: 52px; }
  .fx-banner { font-size: 36px; padding: 4px 20px; }
  .fx-count { font-size: 48px; }
}
@media (max-height: 760px) and (min-width: 641px) { #hud { --w: 76px; } }
@media (max-height: 680px) { #hud { --w: 62px; } }

/* ══ 메뉴 화면: SHOOT! 와 같은 닌텐도풍 (둥근 알약 버튼, 흰 카드, 타일) ══ */
.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: #fff; line-height: 2; touch-action: manipulation; }
.screen.nin {
  background:
    radial-gradient(circle, #ffffff2e 18%, transparent 19%) 0 0 / 46px 46px,
    radial-gradient(circle, #ffffff1a 18%, transparent 19%) 23px 23px / 46px 46px,
    linear-gradient(170deg, var(--sky1), var(--sky2));
  animation: dots 6s linear infinite;
}
@keyframes dots { to { background-position: 46px 46px, 69px 69px, 0 0; } }
.modal { background: #0f2a1499; }

/* 로고: 원(빨강 테두리) + 카드(초록 테두리). 언어마다 길이가 달라 줄바꿈을 허락한다 */
.logo-wrap { position: relative; margin: 4px 0 6px; max-width: 100%; }
.logo {
  font-family: var(--logo); font-weight: 700; font-size: 92px; line-height: 1.05; letter-spacing: 2px; color: #fff;
  -webkit-text-stroke: 14px var(--red); paint-order: stroke fill;
  text-shadow: 0 10px 0 var(--red-d), 0 18px 18px #0f3a1855;
  transform: rotate(-4deg); animation: bob 2.4s ease-in-out infinite;
}
.logo span { -webkit-text-stroke-color: var(--blue); text-shadow: 0 10px 0 var(--blue-d), 0 18px 18px #0f3a1855; }
@keyframes bob { 50% { transform: rotate(-4deg) translateY(-8px); } }
.tagline { font-size: 21px; margin: 40px 0; text-shadow: 0 2px 0 var(--txt-sh); }
.tagline b { font-weight: normal; color: var(--yellow); }

/* 흰 카드 (nin.css 의 카드에 메뉴 배치만 더한다) */
.nin .card, .modal .card {
  box-shadow: 0 8px 0 var(--shade), 0 18px 30px var(--shade-far);
  display: flex; flex-direction: column; align-items: center; width: 400px; max-width: 100%;
}
.card-title { margin-bottom: 10px; }
.nin-input { font-size: 22px; padding: 12px 16px; margin-bottom: 10px; }
.pill { margin: 14px 0; }
.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; box-shadow: 0 5px 0 var(--shade); }
.link:hover { box-shadow: 0 7px 0 var(--shade); }
.link:active { box-shadow: 0 1px 0 var(--shade); }
.msg { min-height: 22px; margin-top: 20px; color: #fff3c4; font-size: 17px; }
.card .msg { color: var(--red-d); }
#name-msg { margin-top: 10px; }
#name-msg:empty { display: none; }
.controls { font-size: 15px; opacity: .9; text-shadow: 0 1px 0 var(--txt-sh); }
.controls b { font-weight: normal; color: var(--yellow); }

/* 모드 선택 타일 */
.hello { font-size: 50px; margin-bottom: 44px; text-shadow: 0 3px 0 var(--txt-sh); }
.hello b { font-weight: normal; color: var(--yellow); }
.tiles { display: flex; gap: 22px; margin-bottom: 24px; flex-wrap: wrap; justify-content: center; }
.tile {
  font: inherit; color: #fff; cursor: pointer; border: 6px solid #fff; border-radius: 34px;
  width: 260px; height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg); box-shadow: 0 10px 0 var(--sh), 0 20px 30px #0f3a1840; transition: transform .1s, box-shadow .1s;
}
.tile.red { --bg: var(--red); --sh: var(--red-d); }
.tile.blue { --bg: var(--blue); --sh: var(--blue-d); }
.tile:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 14px 0 var(--sh), 0 26px 34px #0f3a1840; }
.tile:active { transform: translateY(6px); box-shadow: 0 3px 0 var(--sh); }
.t-ic { font-size: 70px; line-height: 1; filter: drop-shadow(0 4px 0 #00000030); }
.t-name { font-size: 32px; }
.t-sub { font-size: 16px; opacity: .9; margin-top: 6px; }
.nin h2 {
  font-family: var(--logo); font-weight: 700; font-size: 44px; line-height: 1.15; margin: 0 0 28px; color: #fff;
  -webkit-text-stroke: 8px var(--blue-d); paint-order: stroke fill; text-shadow: 0 6px 0 #1d5a27;
}

/* 방 목록 */
#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: 3px solid #e3e9f2; border-radius: 18px; background: #f7f9fc;
  box-shadow: 0 4px 0 #d3dcea; transition: transform .08s;
}
#room-list button.room:hover { border-color: var(--blue); 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(--blue); border-radius: 999px; 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; text-shadow: 0 2px 0 var(--txt-sh); }
.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: 4px solid #fff; border-radius: 22px; background: #fff;
  box-shadow: 0 6px 0 var(--shade); 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); box-shadow: 0 8px 0 var(--shade); border-color: var(--yellow); }
.inv-code:active, .inv-link:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--shade); }
.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(--blue); border-radius: 999px; 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: 18px; background: var(--c); color: #fff; border: 4px solid #fff;
  box-shadow: 0 5px 0 #00000030; 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: #ffffff25; color: #ffffffb0; border: 4px dashed #ffffff80; box-shadow: none; text-shadow: none; }
#lobby-players .pl.pending { color: #fff; animation: pl-pulse 1.2s ease-in-out infinite; }
@keyframes pl-pulse { 50% { opacity: .5; } }
#lobby-status { margin: 26px 0 18px; font-size: 18px; text-shadow: 0 1px 0 var(--txt-sh); }

/* 라운드 결과: 점수표 (이름 · 남은 장수 · 점수) */
.res-hero { font-size: 70px; line-height: 1.1; }
.res-title { font-family: var(--logo); font-weight: 700; font-size: 44px; line-height: 1.3; text-shadow: 0 3px 0 var(--txt-sh); }
#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 64px; 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: #fff4c4; }
#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-hint { font-size: 18px; margin: -12px 0 14px; text-shadow: 0 2px 0 var(--txt-sh); }
.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: #ffffffc0; font-size: 13px; line-height: 1.5; }
#title .privacy-link { color: #ffffffc0; text-decoration: underline; }
#title .privacy-link:hover { color: #fff; }

/* 구석 버튼: 오른쪽 위 언어, 왼쪽 위 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; }
}
@media (max-width: 640px) {
  .logo { font-size: 54px; -webkit-text-stroke-width: 9px; }
  #res-table { width: 100% !important; } #res-table .rrow { font-size: 17px; gap: 8px; grid-template-columns: 1fr auto 48px; }
  .tagline { font-size: 17px; margin: 24px 0; }
  .tiles { gap: 14px; }
  .tile { width: 100%; max-width: 340px; height: 140px; flex-direction: row; gap: 14px; }
  .tile .t-ic { font-size: 50px; }
  .tile .t-name { font-size: 26px; }
  .tile .t-sub { display: none; }
  .hello { font-size: 34px; margin-bottom: 26px; }
  .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, .corner-l .pill { font-size: 13px; padding: 7px 12px; }
  .corner { top: 10px; right: 10px; }
  .corner-l { top: 10px; left: 10px; max-width: calc(100% - 130px); }
  #title .logo-wrap { margin-top: 56px; }
  #title .legal-links { text-align: center; position: static; margin-top: 4px; font-size: 12px; }
}