/* 멍멍 똥폭탄: 공용 /common/nin.css(토큰·카드·알약·입력칸·모달) 다음에 읽는다.
   메뉴 화면은 Paper.io style.css 의 메뉴 규칙을 그대로 옮겨 오고(같은 클래스·같은 배치) 색 토큰만 원본의 공원 색(진초록 #244d3b · 갈색 #b37b3f · 노랑 #f1cf70 · 크림 #f8f6e9)으로 바꾼다.
   게임 화면(#hud)은 원본 배치: 위 막대(boardtop) → 판(캔버스, 화면에 맞춰 비율 유지) → 승수·강화·상태 줄 → 모바일 버튼 */
:root {
  --red: #c77c43; --red-d: #8b5834;          /* 주 버튼(다음 ▶ · 혼자 하기 · 시작) = 갈색 */
  --blue: #3e7a55; --blue-d: #244d3b;        /* 보조(온라인 대전 · 방 만들기 · 입력칸 테두리) = 공원 초록 */
  --yellow: #f1cf70; --yellow-d: #d6af4d;
  --sky1: #b9d68f; --sky2: #315b43;          /* 메뉴 배경 그라데이션 (잔디 → 짙은 초록) */
  --shade: #173f3140; --shade-far: #0f2a1d30; /* 카드·알약 그림자 */
  --txt-sh: #244d3b;                          /* 흰 글씨 그림자 */
  --card-sh: 0 4px 0 var(--shade), 0 10px 18px var(--shade-far);
  --cream: #f8f6e9; --park: #244d3b; --park2: #315b43;
  --team0: #c88243; --team1: #6c8aa7;         /* 🐕 팀 · 🐩 팀 (원본 1P · 2P 승수 색) */
}
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: var(--cream); color: var(--park);
  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: none;
}
.hidden { display: none !important; }

/* ---------- 게임 화면 ---------- */
#hud {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom)); gap: 0; background: var(--cream);
}
.boardtop, #board, .hudrow { width: var(--bw, 780px); }
.boardtop {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--park2); color: #fff6d5; font-size: 12px; font-weight: 800; padding: 6px 12px 8px;
  border-radius: 18px 18px 0 0; letter-spacing: .5px;
}
.boardtop strong { font-size: 22px; min-width: 48px; text-align: center; }
.boardtop span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boardtop span:last-child { text-align: right; font-size: 11px; }
#board { position: relative; border: 6px solid var(--park2); border-top: 0; border-radius: 0 0 18px 18px; overflow: hidden; background: #b2cd8c; box-shadow: 0 7px 0 #dbe1c6; }
#game { display: block; width: 100%; height: auto; aspect-ratio: 13 / 11; touch-action: none; }
.hudrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: 15px; font-weight: 800; flex-wrap: wrap; }
#hud-wins { font-size: 20px; }
#hud-wins b { color: var(--team0); } #hud-wins b + b { color: var(--team1); }
#hud-up { background: #eeefde; border: 1px solid #e3e6cf; border-radius: 12px; padding: 2px 12px; }
#hud-status { color: #7b876c; font-size: 13px; }
#toast {
  position: absolute; left: 50%; top: 10%; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  background: #fffcf0; color: var(--park); border-radius: 999px; padding: 4px 16px; font-weight: 800; font-size: 16px; opacity: 0; transition: opacity .25s;
}
#toast.show { opacity: 1; }
/* 라운드 끝 창 (판 위) */
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 15px; background: #1c473d66; backdrop-filter: blur(4px); z-index: 2; }
.rmodal { max-width: 360px; width: 100%; padding: 22px; background: #fffcf0; border: 2px solid #fff; border-radius: 25px; text-align: center; box-shadow: 0 15px 50px #173f3133; }
.rmodal .hero { font-size: 50px; line-height: 1.3; }
.rmodal h3 { font-size: 25px; letter-spacing: -1px; margin: 8px 0; }
#ro-score { font-size: 30px; font-weight: 900; color: var(--park2); }
.rmodal small { display: block; font-size: 12px; color: #9b9f85; margin-top: 10px; }
/* 모바일 버튼 (원본 그대로): 왼쪽 방향 버튼, 오른쪽 💦 · 💩 (누른 채 이동하면 연속 설치) */
.mobilecontrols { display: flex; justify-content: space-between; align-items: center; width: var(--bw, 780px); margin-top: 12px; padding: 0 8px; touch-action: none; user-select: none; }
.dpad { display: grid; grid-template-columns: 52px 52px 52px; grid-template-rows: 46px 46px; gap: 6px; }
.dpad button, .actions button { font: inherit; border: 0; cursor: pointer; color: inherit; touch-action: none; }
.dpad button { background: #e5e9d4; border-radius: 12px; font-size: 22px; box-shadow: 0 3px 0 #d1d9bd; }
.dpad .up { grid-column: 2; } .dpad .left { grid-column: 1; grid-row: 2; } .dpad .down { grid-column: 2; grid-row: 2; } .dpad .right { grid-column: 3; grid-row: 2; }
.actions { display: flex; align-items: center; gap: 12px; }
.bombbtn { width: 84px; height: 84px; background: var(--yellow); border-radius: 50%; font-size: 30px; box-shadow: 0 5px 0 var(--yellow-d); }
.peebtn { width: 58px; height: 58px; background: #d9e6c5; border-radius: 50%; font-size: 23px; box-shadow: 0 4px 0 #c0d2a8; }
.dpad button:active, .actions button:active { transform: translateY(3px); box-shadow: none; }

/* ══ 메뉴 화면: 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칸: 들어온 순서(1·3번 칸 🐕 팀 갈색, 2·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-players .pl.t0 { --c: var(--team0); } #lobby-players .pl.t1 { --c: var(--team1); }
#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-score { width: 360px !important; font-size: 44px; line-height: 1.4; margin: 22px 0 30px; flex-direction: row !important; justify-content: center; gap: 14px; }
#res-score small { font-size: 18px; color: var(--sub); }
#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; }
  .hudrow { font-size: 13px; margin-top: 8px; } #hud-wins { font-size: 17px; }
  #res-score { width: 100% !important; font-size: 36px; }
  .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; }
}