/* 폴짝 로드: 공용 /common/nin.css(토큰·카드·알약·입력칸·모달) 다음에 읽는다.
   메뉴 화면은 다른 Gamepio 게임과 같은 클래스·배치(.screen.nin · .card · #lobby-players …)에 색 토큰만 들판 팔레트
   (풀 초록 #7ed957 · 짙은 초록 #2f8f46 · 신호 빨강 #ff5a3c · 하늘 파랑 #2f9be0 · 크림 #f6ffe8)로 바꾸고, 방 목록에 캐릭터 고르기(#char-pick)를 더한다.
   게임 화면(#hud)은 화면 가득 WebGL 캔버스(#stage) 위에 위 가운데 점수, 왼쪽 위 미니 순위, 오른쪽 위 모드 · 나가기, 연출 층(#fx), 위험 테두리(.danger) */
:root {
  --red: #ff5a3c; --red-d: #c8361b;          /* 주 버튼(다음 ▶ · 혼자 하기 · 시작) = 신호 빨강 */
  --blue: #2f9be0; --blue-d: #1d6ea6;        /* 보조(방 만들기 · 입력칸 테두리) = 하늘 파랑 */
  --yellow: #ffd23f; --yellow-d: #d9a400;
  --sky1: #8fe36a; --sky2: #2f8f46;          /* 메뉴 배경 (연두 → 짙은 초록) */
  --shade: #14431f40; --shade-far: #0b2a1430;
  --txt-sh: #1f6331;                          /* 흰 글씨 그림자 */
  --card-sh: 0 4px 0 var(--shade), 0 10px 18px var(--shade-far);
  --cream: #f6ffe8; --deep: #1f4d2a;
}
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: #2f8f46; color: var(--cream);
  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; overflow: hidden; background: #1d2540; touch-action: none; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud-top {
  position: absolute; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; font-family: var(--ui); color: #fff; text-shadow: 0 3px 0 #0007;
}
#hud-score { font-family: var(--logo); font-weight: 700; font-size: 58px; line-height: 1; -webkit-text-stroke: 7px var(--deep); paint-order: stroke fill; }
#hud-gap { margin-top: 4px; font-size: 15px; padding: 2px 12px; border-radius: 999px; background: #0006; white-space: nowrap; }
#hud-gap:empty { display: none; }
/* 미니 순위 (왼쪽 위): 자리 색 테두리 알약 — 캐릭터(죽으면 까닭) · 이름 · 최고 줄 */
#hud-ranks { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; z-index: 3; display: flex; flex-direction: column; gap: 5px; pointer-events: none; font-family: var(--ui); }
#hud-ranks .rk {
  display: grid; grid-template-columns: 26px minmax(0, 92px) auto; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; border-radius: 999px;
  background: #ffffffe6; color: var(--ink); border: 3px solid var(--c); font-size: 14px; box-shadow: 0 3px 0 #0004;
}
#hud-ranks .rk .ri { font-size: 20px; text-align: center; line-height: 1.2; }
#hud-ranks .rk .rn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud-ranks .rk b { font-weight: normal; color: var(--c); font-size: 17px; text-align: right; min-width: 22px; }
#hud-ranks .rk.me { background: #fff; transform: scale(1.06); transform-origin: left center; }
#hud-ranks .rk.dead { opacity: .55; filter: grayscale(.6); }
.hud-opts { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; z-index: 4; display: flex; align-items: center; gap: 8px; }
#hud-mode, #hud-map { font-family: var(--ui); font-size: 11px; color: #fff; background: #0006; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
#hud-map:empty { display: none; }
.hud-leave { margin: 0; }
#hint, #spectate {
  position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 5; pointer-events: none;
  max-width: calc(100% - 32px); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--yellow); color: var(--deep); border: 3px solid #fff; border-radius: 999px; padding: 6px 18px;
  font-family: var(--ui); font-size: 17px; box-shadow: 0 4px 16px #0008; animation: hint-pulse 1s ease-in-out infinite alternate;
}
#spectate { background: #ffffffe8; animation: none; display: flex; align-items: center; gap: 10px; }
#spectate span { overflow: hidden; text-overflow: ellipsis; }
#skip-btn { pointer-events: auto; margin: 0; flex: none; }
/* 부활 창: 판 위 반투명 막 + 카드 (광고 보고 한 번 더 · 남은 초) */
#revive-overlay { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 16px; background: #0b2a1466; }
.rmodal { max-width: 360px; width: 100%; padding: 22px; background: var(--cream); color: var(--deep); border: 3px solid #fff; border-radius: 25px; text-align: center; box-shadow: 0 15px 50px #0006; font-family: var(--ui); }
.rmodal h3 { font-size: 25px; letter-spacing: -1px; margin: 4px 0 8px; }
.rmodal .rsub { font-size: 15px; opacity: .85; margin: 0 0 6px; }
.rmodal small { display: block; font-size: 12px; opacity: .7; margin-top: 10px; }
#revive-btn { width: 100%; font-size: 20px; margin: 8px 0 0; }
/* 부활 광고 (자체 광고 자리, common/ads.js — Paper.io·봄버독과 같다) */
#ad { position: fixed; inset: 0; z-index: 30; background: #10261a; font-family: var(--ui); color: #fff; line-height: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 16px; }
.ad-top { position: absolute; left: 18px; top: 16px; font-size: 18px; }
.ad-tag { background: var(--yellow); color: var(--deep); border-radius: 6px; padding: 1px 8px; margin-right: 4px; line-height: 1.5; }
.ad-box { width: 640px; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; background: #1b3a27; border: 3px dashed #3f6b4c; display: flex; align-items: center; justify-content: center; }
.ad-slot { font-size: 28px; color: #8fb59a; }
.ad-actions { display: flex; gap: 12px; }
@keyframes hint-pulse { to { transform: translateX(-50%) scale(1.05); } }
#toast {
  position: absolute; left: 50%; top: 104px; transform: translateX(-50%); pointer-events: none; white-space: nowrap; z-index: 5;
  background: var(--cream); color: var(--deep); border-radius: 999px; padding: 4px 16px; font-family: var(--ui); font-size: 16px; opacity: 0; transition: opacity .25s;
}
#toast.show { opacity: 1; }
/* 위험: 뒤(floor)가 DANGER 칸 안으로 오면 빨간 테두리가 맥박 */
#danger { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s; box-shadow: inset 0 0 70px 18px #ff2a2acc; }
#hud.danger #danger { opacity: 1; animation: danger 0.5s ease-in-out infinite alternate; }
@keyframes danger { from { box-shadow: inset 0 0 40px 8px #ff2a2a99; } to { box-shadow: inset 0 0 90px 26px #ff2a2add; } }

/* 연출 층 (fx.js): 둥근 배너 · 팝업 */
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.fx-banner {
  position: absolute; left: 50%; top: 45%; min-width: min(78vw, 300px); max-width: 90vw; border-radius: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 18px 30px 20px;
  background: linear-gradient(#9be86f, #3faa55); border: 6px solid #fff; box-shadow: 0 8px 0 #1f6331, 0 20px 50px #000a;
  color: #fff; font-family: var(--ui); transform: translate(-50%, -50%);
  animation: slam var(--dur, 1.4s) cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.fx-banner.red { background: linear-gradient(#ff8a6a, #e2412a); box-shadow: 0 8px 0 #8e2414, 0 20px 50px #000a; }
.fx-banner.gold { background: linear-gradient(#fff1a8, #ffc23d); color: #5a3a06; box-shadow: 0 8px 0 #a8741a, 0 20px 50px #000a; }
.fx-banner .ic { font-size: 50px; line-height: 1.1; }
.fx-banner .big { font-family: var(--logo); font-weight: 700; font-size: clamp(28px, 7vmin, 46px); line-height: 1.1; word-break: keep-all; text-shadow: 0 3px 0 #0005; }
.fx-banner.gold .big { text-shadow: 0 2px 0 #fff8; }
.fx-banner .sub { font-size: clamp(14px, 3.2vmin, 18px); opacity: .95; }
@keyframes slam {
  0% { transform: translate(-50%, -50%) scale(2) rotate(-12deg); opacity: 0; }
  14% { transform: translate(-50%, -50%) scale(.94) rotate(2deg); opacity: 1; }
  22%, 80% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
}
.fx-pop { position: absolute; transform: translate(-50%, -50%); font-size: 40px; white-space: nowrap; animation: pop 1s ease-out forwards; filter: drop-shadow(0 3px 0 #0006); }
@keyframes pop {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  20% { transform: translate(-50%, -90%) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -190%) scale(1); opacity: 0; }
}

/* ══ 메뉴 화면: 닌텐도풍 (둥근 알약 버튼, 흰 카드) ══ */
.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, #ffffff26 18%, transparent 19%) 0 0 / 46px 46px,
    repeating-linear-gradient(180deg, #ffffff10 0 60px, transparent 60px 120px),
    linear-gradient(170deg, var(--sky1), var(--sky2));
  animation: dots 6s linear infinite;
}
@keyframes dots { to { background-position: 46px 46px, 0 120px, 0 0; } }
.modal { background: #0b2a1499; }

/* 로고: 폴짝(빨강 테두리) + 로드(파랑 테두리), 위에 통통 튀는 캐릭터 */
.logo-wrap { position: relative; margin: 4px 0 6px; max-width: 100%; }
.logo-ic { font-size: 46px; line-height: 1; animation: hop 0.9s ease-in-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0) scaleY(1); } 30% { transform: translateY(-16px) scaleY(1.08); } 55% { transform: translateY(0) scaleY(.88); } }
.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 #0b2a1455;
  transform: rotate(-3deg);
}
.logo span { -webkit-text-stroke-color: var(--blue); text-shadow: 0 10px 0 var(--blue-d), 0 18px 18px #0b2a1455; }
.tagline { font-size: 21px; margin: 34px 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: .95; text-shadow: 0 1px 0 var(--txt-sh); }
.controls b { font-weight: normal; color: var(--yellow); }

/* 방 목록 위 인사 한 줄: 안녕, 이름! · ◀ 닉네임 바꾸기 · ℹ️ 게임 소개 */
.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 10px; text-shadow: 0 2px 0 var(--txt-sh); }
.hello b { font-weight: normal; color: var(--yellow); }
.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: 44px; line-height: 1.15; margin: 0 0 28px; color: #fff;
  -webkit-text-stroke: 8px var(--deep); paint-order: stroke fill; text-shadow: 0 6px 0 #0b2a14;
}

/* 캐릭터 고르기: 가로 한 줄 8개 (좁으면 4 × 2) — 고른 것은 노란 테두리 + 폴짝 */
.char-box { width: 560px; max-width: 100%; margin: 0 0 14px; }
.char-title { font-size: 16px; line-height: 1.4; margin-bottom: 6px; text-shadow: 0 1px 0 var(--txt-sh); }
#char-pick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
#char-pick .ch {
  font: inherit; color: var(--ink); cursor: pointer; border: 3px solid #ffffffa0; border-radius: 18px; background: #ffffffd8;
  display: flex; flex-direction: column; align-items: center; padding: 6px 2px 4px; line-height: 1.2; box-shadow: 0 4px 0 var(--shade);
  transition: transform .08s, background .12s;
}
#char-pick .ch:hover { transform: translateY(-2px); background: #fff; }
#char-pick .ci { font-size: 32px; line-height: 1.1; }
#char-pick .cn { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#char-pick .ch.on { background: #fff; border-color: var(--yellow); box-shadow: 0 4px 0 var(--yellow-d), 0 0 0 3px var(--yellow-d); }
#char-pick .ch.on .ci { animation: hop 0.9s ease-in-out infinite; }

/* 방 목록 */
#room-list { width: 520px; max-height: 34vh; overflow-y: auto; gap: 20px; padding: 14px; margin-bottom: 12px; }
#room-list .empty { color: #6b7280; padding: 18px 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 #e1f0d6; border-radius: 18px; background: #f9fff4;
  box-shadow: 0 4px 0 #cfe3c0; transition: transform .08s;
}
#room-list button.room:hover { border-color: var(--red); 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: .95; }
.invite { display: flex; gap: 12px; margin: 28px 0 34px; 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칸 (2 × 2): 자리 색 칸에 캐릭터 · 국기 · 이름, 연결 중 칸(깜빡임), 빈 칸은 점선(AI 가 채운다) */
#lobby-players { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; width: 520px; 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: #ffffffd0; border: 4px dashed #ffffff90; 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: 24px 0 14px; 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-map { font-family: var(--ui); font-size: 14px; margin: -2px 0 6px; opacity: .8; }
#res-table { width: 460px; margin: 18px 0 26px; gap: 8px; line-height: 1.4; }
.rrow { display: grid; grid-template-columns: 36px 32px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; width: 100%; color: var(--ink); font-size: 20px; padding: 6px 12px; border-radius: 14px; background: #f1f8ea; border-left: 6px solid var(--c); }
.rrow.win { background: #fff6c9; outline: 3px solid var(--yellow-d); }
.rrow.me .rn::after { content: " ✦"; color: var(--red); }
.rrow .rk { font-size: 22px; text-align: center; }
.rrow .rc { font-size: 24px; }
.rrow .rn { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .rs { font-size: 14px; color: #6b7280; white-space: nowrap; }
.rrow .rv { font-size: 18px; color: var(--deep); white-space: nowrap; }
#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: #ffffffd0; font-size: 13px; line-height: 1.5; }
#title .privacy-link { color: #ffffffd0; 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: 799px) {
  #title { line-height: 1.5; } #title .logo { font-size: 76px; } #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; }
  #rooms h2 { margin-bottom: 18px; font-size: 38px; } #rooms > .pill.big { margin: 5px 0; font-size: 22px; padding: 10px 0; } #room-list { max-height: 24vh; }
  #lobby h2 { margin-bottom: 8px; } .room-title { margin-bottom: 6px; } .invite { margin: 12px 0 16px; } #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; }
  .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; }
  #char-pick { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  #char-pick .ci { font-size: 28px; }
  .invite { flex-direction: column; }
  .inv-code b { font-size: 38px; }
  #lobby-link-text { font-size: 15px; }
  #lobby-players { gap: 10px; }
  #lobby-players .pl { font-size: 15px; padding: 8px 10px; }
  .res-title { font-size: 32px; }
  #res-table { width: 100%; }
  .rrow { font-size: 16px; grid-template-columns: 28px 26px minmax(0, 1fr) auto auto; gap: 6px; padding: 5px 8px; }
  .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; }
  /* 게임 화면: 점수는 작게, 순위는 이름 없이 좁게, 모드는 숨김 */
  #hud-score { font-size: 44px; -webkit-text-stroke-width: 6px; }
  #hud-gap { font-size: 12px; }
  #hud-ranks .rk { grid-template-columns: 22px minmax(0, 54px) auto; font-size: 12px; gap: 4px; }
  #hud-ranks .rk .ri { font-size: 16px; }
  #hud-mode { display: none; }
  #hint, #spectate { font-size: 13px; padding: 5px 12px; }
  #toast { top: 92px; }
}

/* ══ 복셀 등각 화풍 (커버 cover.svg 와 한 세트) ══════════════════════
   연하늘 → 연분홍 하늘 + 네모 구름, 아래는 풀 · 흙 블록 바닥(등각 격자), UI 는 각진 블록(윗면 밝게 · 옆면 계단 그림자),
   로고는 크림 글자를 초록으로 한 칸씩 밀어 쌓은 블록 글자. 위 규칙의 배치는 그대로 두고 색·모서리·그림자만 덮는다. */
:root {
  --p-sky1: #b9e6ff; --p-sky2: #ffe3f1; --p-cloud: #ffffff; --p-cloud-s: #e3ecfb;
  --p-grass: #8fd86c; --p-grass-s: #6fb553; --p-dirt: #986b4a; --p-dirt-d: #7a563b;
  --p-road: #a1a1a1; --p-road-l: #c8c8c8; --p-green: #2f8f46; --p-green-d: #1f5f2f; --p-cream: #fffef6;
  --red: #ff6b6b; --red-d: #c92a31;
  --blue: #3d9bff; --blue-d: #2364b8;
  --yellow: #ffd23f; --yellow-d: #c99a10;
  --deep: var(--p-green-d); --ink: #26302a;
  --txt-sh: transparent; --shade: #1f5f2f40; --shade-far: #1f5f2f22;
  /* 블록 계단 그림자: 옆면 한 칸 + 바닥 그림자 한 칸 */
  --block-sh: 4px 4px 0 var(--p-grass-s), 8px 8px 0 #1f5f2f30;
  --card-sh: var(--block-sh);
}
html, body { background: var(--p-sky1); }

/* 메뉴 배경: 하늘 그라데이션 + 네모 구름 + 아래 풀 블록 바닥(등각 격자) · 흙 단면 */
.screen.nin {
  color: var(--p-green-d); text-shadow: none; animation: none;
  --clouds:
    linear-gradient(var(--p-cloud), var(--p-cloud)) 8% 16% / 90px 22px no-repeat,
    linear-gradient(var(--p-cloud), var(--p-cloud)) calc(8% + 20px) calc(16% - 14px) / 46px 16px no-repeat,
    linear-gradient(var(--p-cloud-s), var(--p-cloud-s)) calc(8% + 6px) calc(16% + 18px) / 90px 8px no-repeat,
    linear-gradient(var(--p-cloud), var(--p-cloud)) 90% 30% / 110px 24px no-repeat,
    linear-gradient(var(--p-cloud), var(--p-cloud)) calc(90% - 24px) calc(30% - 16px) / 52px 18px no-repeat,
    linear-gradient(var(--p-cloud-s), var(--p-cloud-s)) calc(90% + 6px) calc(30% + 20px) / 110px 8px no-repeat;
  /* 네모 구름 두 덩이(윗면 흰색 + 옆면 연파랑) · 바닥: 흙 단면(아래 18px) 위 풀 띠 + 등각 격자선 */
  background:
    var(--clouds),
    linear-gradient(var(--p-dirt) 0 60%, var(--p-dirt-d) 60%) 0 100% / 100% 18px no-repeat,
    repeating-linear-gradient(30deg, transparent 0 26px, #6fb55380 26px 28px) 0 calc(100% - 18px) / 100% 70px no-repeat,
    repeating-linear-gradient(-30deg, transparent 0 26px, #6fb55380 26px 28px) 0 calc(100% - 18px) / 100% 70px no-repeat,
    linear-gradient(var(--p-grass), var(--p-grass)) 0 calc(100% - 18px) / 100% 70px no-repeat,
    linear-gradient(180deg, var(--p-sky1), var(--p-sky2));
}
.modal { background: #1f5f2f80; }

/* 로고: 크림 글자 + 초록 테두리, 아래로 한 칸씩 밀어 쌓은 블록 두께 (커버 제목과 같은 방법) */
.logo-ic { animation: hop 0.9s ease-in-out infinite; line-height: 0; }
.logo-vox { width: 120px; height: auto; display: block; margin: 0 auto -4px; }
.logo, .logo span {
  color: var(--p-cream); -webkit-text-stroke: 8px var(--p-green); paint-order: stroke fill;
  text-shadow: 1px 1px 0 var(--p-green), 2px 2px 0 var(--p-green), 3px 3px 0 var(--p-green), 4px 4px 0 var(--p-green),
    5px 5px 0 var(--p-green), 6px 6px 0 var(--p-green-d), 7px 7px 0 var(--p-green-d), 10px 12px 0 #1f5f2f30;
}
.logo { transform: none; letter-spacing: 1px; }
/* 글자 아래 절반 노란 비침 (커버의 반쯤 노란 글자) */
.logo { background: linear-gradient(transparent 55%, #ffe27a66 55%); -webkit-background-clip: text; background-clip: text; }
.tagline, .controls, .hello.small, .room-title, #lobby-status, #res-hint, .lobby-hint, .char-title, .res-title, .res-map { color: var(--p-green-d); text-shadow: none; }
.tagline b, .controls b, .hello b { color: #c94f1c; }
.nin h2, .res-title {
  color: var(--p-cream); -webkit-text-stroke: 6px var(--p-green); paint-order: stroke fill;
  text-shadow: 1px 1px 0 var(--p-green), 2px 2px 0 var(--p-green), 3px 3px 0 var(--p-green), 4px 4px 0 var(--p-green-d), 5px 5px 0 var(--p-green-d);
}

/* 카드: 각진 흰 블록 (윗면) + 옆면 계단 그림자 */
.nin .card, .modal .card, .rmodal { border-radius: 4px; border: 0; box-shadow: var(--block-sh); }
.rmodal { background: #fff; }
.card-title { color: var(--p-green-d); }
.nin-input { border-radius: 2px; border: 3px solid #d9e8cf; background-color: #f6fbf1; box-shadow: inset 0 3px 0 #e3eedb; }
.nin-input:focus { border-color: var(--p-grass-s); }
select.nin-input { background-color: #f6fbf1; }

/* 알약 → 블록 버튼: 각진 모서리, 아래·오른쪽 옆면(짙은 색)이 눌리면 들어간다 */
.pill { border-radius: 4px; box-shadow: 4px 5px 0 var(--sh, var(--red-d)); }
.pill:hover { box-shadow: 5px 7px 0 var(--sh, var(--red-d)); }
.pill:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--sh, var(--red-d)); }
.pill.white { --sh: #b9c9b0; }
.pill.hud-leave { box-shadow: 3px 3px 0 var(--sh); }
.pill.hud-leave:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sh); }
.link { color: var(--p-green-d); background: #ffffffc0; border: 0; border-radius: 4px; box-shadow: 3px 4px 0 var(--p-grass-s); }
.link:hover { background: #fff; box-shadow: 4px 6px 0 var(--p-grass-s); }
.link:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--p-grass-s); }
.card .link, .modal .link { color: var(--p-green-d); background: #eef6e8; border: 0; box-shadow: 3px 4px 0 #b9c9b0; }
.msg { color: var(--red-d); }
#title .legal-links, #title .privacy-link { color: #fffef6e0; }

/* 방 목록 · 캐릭터 · 로비 · 결과: 모두 각진 블록 */
#char-pick .ch { border-radius: 4px; border: 3px solid transparent; background: #ffffffe0; box-shadow: 3px 4px 0 var(--p-grass-s); }
#char-pick .ch.on { border-color: var(--yellow); box-shadow: 3px 4px 0 var(--yellow-d); }
#room-list button.room { border-radius: 3px; border: 2px solid #d9e8cf; box-shadow: 3px 3px 0 #cfe3c0; }
#room-list .rcount, .inv-copy, .copied .inv-copy, .inv-code.copied .inv-label { border-radius: 3px; }
.inv-code, .inv-link { border-radius: 4px; border: 0; box-shadow: var(--block-sh); }
#lobby-players .pl { border-radius: 4px; border: 0; box-shadow: 4px 4px 0 #00000030; }
#lobby-players .pl.empty, #lobby-players .pl.pending { background: #ffffff60; color: var(--p-green-d); border: 3px dashed var(--p-grass-s); }
.rrow { border-radius: 3px; }

/* ── HUD: 블록 칩 + 블록 글자 점수 ── */
#hud { background: var(--p-sky1); }
#hud-score {
  color: var(--p-cream); -webkit-text-stroke: 6px var(--p-green); text-shadow: 1px 1px 0 var(--p-green), 2px 2px 0 var(--p-green), 3px 3px 0 var(--p-green), 4px 4px 0 var(--p-green-d), 5px 5px 0 var(--p-green-d);
}
#hud-gap, #hud-mode, #hud-map { border-radius: 3px; background: #1f5f2fc0; }
#hud-ranks .rk { border-radius: 3px; border-width: 0 0 0 6px; background: #ffffffe8; box-shadow: 3px 3px 0 #1f5f2f50; }
#hint, #spectate { border-radius: 4px; border: 0; box-shadow: 4px 4px 0 var(--yellow-d), 0 8px 18px #0004; }
#spectate { box-shadow: 4px 4px 0 #b9c9b0, 0 8px 18px #0004; }
#toast { border-radius: 3px; box-shadow: 3px 3px 0 #b9c9b0; }
.fx-banner { border-radius: 6px; border: 0; background: linear-gradient(var(--p-grass) 0 78%, var(--p-dirt) 78% 92%, var(--p-dirt-d) 92%); box-shadow: 8px 8px 0 #1f5f2f60, 0 20px 50px #0006; }
.fx-banner .big { -webkit-text-stroke: 5px var(--p-green); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--p-green-d); color: var(--p-cream); }
.fx-banner.red { background: linear-gradient(#ff8a7a 0 78%, var(--p-dirt) 78% 92%, var(--p-dirt-d) 92%); }
.fx-banner.red .big { -webkit-text-stroke-color: var(--red-d); text-shadow: 3px 3px 0 #8e1e22; }
.fx-banner.gold { background: linear-gradient(#ffe27a 0 78%, var(--p-dirt) 78% 92%, var(--p-dirt-d) 92%); }
.fx-banner.gold .big { -webkit-text-stroke-color: #a8741a; text-shadow: 3px 3px 0 #6a4808; }
.ad-box, .ad-tag { border-radius: 3px; }
@media (max-width: 640px) {
  .logo, .logo span { -webkit-text-stroke-width: 6px; }
  .logo-vox { width: 92px; }
  .screen.nin { --clouds: linear-gradient(transparent, transparent); } /* 좁은 화면은 구름이 글자 뒤에 걸려 뺀다 */
  #hud-score { -webkit-text-stroke-width: 5px; }
}