/* 무한 달리기: 공용 /common/nin.css(토큰·카드·알약·입력칸·모달) 다음에 읽는다.
   메뉴 화면은 다른 Gamepio 게임과 같은 클래스·배치(.screen.nin · .card · #lobby-players …)에 커버(cover.svg)의 종이 오리기 화풍을 입힌다:
   해질녘 주황 하늘 · 동심원 종이 해 · 분홍/주황/붉은 종이 언덕 층(위로 그림자) · 크림 종이 조각 카드·알약(두꺼운 흰 테두리 + 아래 그림자) · 겹 그림자 로고.
   게임 화면(#hud)은 화면 가득 2D 캔버스(#stage) 위에 위 가운데 거리(큰 숫자)·별·점수, 왼쪽 위 체력 막대(#hud-hp)·스테이지·능력 고리·내 최고·남은 시간, 거리 아래 가로 참가자 순위 띠(#racers),
   오른쪽 위 모드 · 나가기, 오른쪽 아래 속도(#speed, 작게), 아래 가운데 안내 알약(#hint), 연출 층(#fx), 빨간 번쩍임(#flash),
   터치 기기(pointer: coarse)만 아래 양 구석 큰 반투명 종이 버튼 둘(#pads: 왼쪽 슬라이드 · 오른쪽 점프 — 표시용, 눌린 동안 .on) */
:root {
  /* 팔레트 (커버): 하늘 주황 → 살구 → 모래, 종이 해, 언덕 분홍 · 주황 · 붉은 주황, 땅 짙은 갈색, 크림 종이, 그림자 #4a1c0c */
  --p-sky1: #ff7b54; --p-sky2: #ffb26b; --p-sky3: #ffd88a; --p-sun1: #ffe7a8; --p-sun2: #ffd166; --p-sun3: #ffbe3d;
  --p-far: #c8607a; --p-hill: #e88a52; --p-near: #cf5530; --p-ground: #5b2a1e; --p-ink: #2b1410;
  --p-paper: #fff4dc; --p-paper2: #ffe7a8; --p-orange: #e8553a; --p-cut: #4a1c0c;
  --paper-sh: 0 -1px 3px #4a1c0c40, 0 5px 0 #4a1c0c38, 0 10px 16px #4a1c0c38;   /* 종이 조각: 위 살짝 · 아래 진하게 */
  --red: var(--p-orange); --red-d: #a8361f;   /* 주 버튼(다음 ▶ · 혼자 하기 · 시작) = 커버 글자 주황 */
  --blue: var(--p-far); --blue-d: #8f3a52;    /* 보조(방 만들기 · 입력칸 테두리) = 먼 언덕 분홍 */
  --yellow: var(--p-sun2); --yellow-d: #d39a2a;
  --sky1: var(--p-sky1); --sky2: var(--p-sky3);
  --shade: #4a1c0c40; --shade-far: #4a1c0c30;
  --txt-sh: #a8361f;                          /* 흰 글씨 그림자 */
  --card-sh: var(--paper-sh);
  --cream: var(--p-paper); --deep: var(--p-ink); --ink: var(--p-ink);
  --logo: "Arial Black", "Helvetica Neue", var(--ui);
  /* 종이 결: 갈색 잔점 두 겹 (메뉴 · 게임 화면 위에 얹는다) */
  --grain: radial-gradient(#4a1c0c12 1px, transparent 1.6px) 0 0 / 7px 7px, radial-gradient(#ffffff14 1px, transparent 1.6px) 3px 4px / 11px 11px;
}
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: var(--p-sky2); 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: var(--p-sky2); touch-action: none; cursor: pointer; -webkit-touch-callout: none; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
/* 캔버스 위 종이 결 (누를 수 없는 얇은 막) */
#hud::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--grain); }
/* 위 가운데: 거리(큰 숫자 · m) · 별 · 점수 */
.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: var(--p-orange);
}
/* 거리: 로고처럼 주황 종이 글자 + 두꺼운 크림 테두리 + 아래 그림자 */
.hud-dist { display: flex; align-items: baseline; gap: 4px; filter: drop-shadow(0 -1px 1.5px #4a1c0c55) drop-shadow(0 4px 0 #4a1c0c40); }
.hud-dist span { font-size: 22px; font-weight: 900; -webkit-text-stroke: 6px var(--p-paper); paint-order: stroke fill; }
#hud-dist { font-family: var(--logo); font-weight: 900; font-size: 60px; line-height: 1.05; -webkit-text-stroke: 10px var(--p-paper); paint-order: stroke fill; display: inline-block; }
#hud-dist.bump { animation: bump .25s ease-out; }
@keyframes bump { 40% { transform: scale(1.25); } }
.hud-sub { display: flex; gap: 8px; margin-top: 4px; }
#hud-stars, #hud-score { font-size: 16px; padding: 1px 12px; border-radius: 10px; background: var(--p-paper); color: var(--p-ink); border: 3px solid #fff; box-shadow: 0 3px 0 #4a1c0c40; white-space: nowrap; }
@keyframes throb { to { transform: scale(1.08); } }
/* 왼쪽 위: 내 최고(혼자) · 남은 시간(온라인) */
.hud-left { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 10px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; font-family: var(--ui); }
#hud-best, #hud-time { font-size: 17px; color: var(--deep); background: var(--p-paper); border: 3px solid #fff; border-radius: 10px; padding: 1px 12px; box-shadow: 0 3px 0 #4a1c0c40; }
#hud-best:empty { display: none; }
/* 체력 막대: 하트 + 크림 종이 틀 안 초록→노랑 막대 + 숫자. 30 이하 빨강 깜빡(.low), 회복 초록 번쩍(.heal), 피해 = 빨간 조각(.hp-chip)이 떨어진다 */
#hud-hp { display: flex; align-items: center; gap: 6px; width: 230px; padding: 3px 10px 3px 6px; background: var(--p-paper); border: 3px solid #fff; border-radius: 12px; box-shadow: 0 3px 0 #4a1c0c40; color: var(--deep); }
#hud-hp .hp-ic { font-style: normal; font-size: 20px; line-height: 1; filter: drop-shadow(0 2px 0 #4a1c0c40); }
#hud-hp .hp-bar { position: relative; flex: 1; height: 14px; border-radius: 7px; background: #4a1c0c26; box-shadow: inset 0 2px 0 #4a1c0c30; overflow: visible; }
#hud-hp .hp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 7px; background: linear-gradient(#7fdc6a, #3fae4a); box-shadow: inset 0 -3px 0 #2a7f3555, inset 0 2px 0 #ffffff60; transition: width .15s linear; }
#hud-hp .hp-n { font-family: var(--logo); font-size: 15px; min-width: 28px; text-align: right; }
#hud-hp.mid .hp-fill { background: linear-gradient(#ffe066, #f2a93b); }
#hud-hp.low .hp-fill { background: linear-gradient(#ff7a6a, #e23b2e); }
#hud-hp.low { animation: hp-low .5s ease-in-out infinite alternate; }
#hud-hp.low .hp-ic { animation: throb .25s ease-in-out infinite alternate; }
@keyframes hp-low { to { background: #ffd0c8; border-color: #ff8a7a; } }
#hud-hp.heal { animation: hp-heal .5s ease-out; }
@keyframes hp-heal { 0% { background: #b6f5a0; border-color: #6fdc5a; transform: scale(1.06); } 100% { background: var(--p-paper); } }
#hud-hp .hp-chip { position: absolute; top: 0; height: 100%; border-radius: 3px; background: #e23b2e; pointer-events: none; animation: hp-chip .7s ease-in forwards; }
@keyframes hp-chip { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(30px) rotate(24deg); opacity: 0; } }
/* 스테이지('STAGE N · 테마 이름', 긴 이름은 말줄임) · 능력(아이콘 + 남은 초 고리: --p = 남은 비율) */
.hud-row { display: flex; align-items: center; gap: 6px; }
#hud-stage { font-family: var(--logo); font-size: 14px; letter-spacing: 1px; color: var(--p-paper); background: var(--p-near); border: 3px solid var(--p-paper); border-radius: 10px; padding: 0 10px; box-shadow: 0 3px 0 #4a1c0c40;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
#hud-power { --p: 1; position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  background: conic-gradient(var(--pc, #8a5cf6) calc(var(--p) * 360deg), #4a1c0c30 0); box-shadow: 0 3px 0 #4a1c0c40; }
#hud-power::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--p-paper); }
#hud-power .pw-ic { position: relative; font-style: normal; font-size: 18px; line-height: 1; }
#hud-power .pw-n { position: absolute; right: -6px; bottom: -4px; font-family: var(--logo); font-size: 12px; color: #fff; background: var(--pc, #8a5cf6); border: 2px solid #fff; border-radius: 8px; padding: 0 4px; line-height: 1.3; }
#hud-power.magnet { --pc: #e8453c; } #hud-power.boost { --pc: #f28a1e; } #hud-power.giant { --pc: #8a5cf6; }
#hud-power.low { animation: throb .2s ease-in-out infinite alternate; }
#hud-time.low { color: #fff; background: var(--red); animation: throb .5s ease-in-out infinite alternate; }
.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 { font-family: var(--ui); font-size: 11px; color: var(--p-paper); background: #5b2a1ecc; border-radius: 6px; padding: 3px 10px; white-space: nowrap; }
.hud-leave { margin: 0; }
/* 참가자 순위 띠 (거리 아래 가로, 온라인): 순위 순 크림 종이 칩 한 줄 — 순위(::before ← data-rank, 1등 👑) · 이름 · 거리(큰 숫자 + m) / 아래 자리 색 막대.
   나 = 노란 종이 + 주황 테두리 · 살짝 위로, 넘어짐·나감 = 흐리게. 아래 #toast 는 띠가 보이면 띠 밑으로 */
#racers {
  position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 108px); left: 10px; right: 10px; z-index: 3; pointer-events: none;
  list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 10px; font-family: var(--ui);
}
#racers li {
  flex: 0 1 180px; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 7px;
  padding: 4px 10px 6px 5px; color: var(--ink); background: #fff4dcf0; border: 3px solid #fff; border-left: 8px solid var(--c); border-radius: 12px;
  box-shadow: 0 4px 0 #4a1c0c38; transition: opacity .3s, transform .3s;
}
#racers li::before {
  content: attr(data-rank); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 900 13px var(--logo); color: var(--p-paper); background: var(--p-near); box-shadow: 0 2px 0 #4a1c0c40;
}
#racers li[data-rank="1"]::before { content: "👑"; background: none; box-shadow: none; font-size: 17px; filter: drop-shadow(0 2px 0 #4a1c0c40); }
#racers li.me { background: var(--p-paper2); border-color: var(--p-orange); border-left-color: var(--c); transform: translateY(-2px); box-shadow: 0 6px 0 #4a1c0c40; }
#racers li.dead { opacity: .5; }
#racers .rn { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#racers li.me .rn { font-weight: bold; }
#racers .rv { font: 900 13px var(--logo); color: var(--p-near); white-space: nowrap; }
#racers .rv b { font-size: 20px; color: var(--p-orange); margin-right: 1px; }
#racers .bar { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: #4a1c0c22; overflow: hidden; }
#racers .bar i { display: block; height: 100%; border-radius: inherit; background: var(--c); transition: width .3s; }
#racers:not(.hidden) ~ #toast { top: calc(max(10px, env(safe-area-inset-top)) + 176px); }
/* 속도 (오른쪽 아래, 작게): ⚡ 유닛/초 */
#speed { position: absolute; right: 12px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 3; pointer-events: none; font-family: var(--ui); font-size: 14px; color: var(--p-paper); background: #5b2a1ecc; border-radius: 6px; padding: 2px 12px; }
#speed b { font-family: var(--logo); font-weight: 700; }
/* 준비 숫자 (온라인 ready) */
#ready { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#ready b { font-family: var(--logo); font-weight: 900; font-size: 140px; color: var(--p-orange); -webkit-text-stroke: 16px var(--p-paper); paint-order: stroke fill; filter: drop-shadow(0 6px 0 #4a1c0c50); animation: bump .5s ease-out infinite; }
#hint, #wait {
  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(--p-paper2); color: var(--deep); border: 4px solid #fff; border-radius: 12px; padding: 5px 18px;
  font-family: var(--ui); font-size: 17px; box-shadow: var(--paper-sh); animation: hint-pulse 1s ease-in-out infinite alternate;
}
#wait { background: var(--p-paper); animation: none; }
/* 두 버튼 (터치 기기만): 아래 양 구석 크림 종이 원판 + 화살표 · 이름, 반투명 — 누를 수 없는 표시(판정은 #hud 왼쪽/오른쪽 절반), 눌린 동안(.on) 꾹 눌린 모양 */
#pads { display: none; }
@media (pointer: coarse) {
  #pads { display: block; position: absolute; inset: auto 0 0 0; height: 0; z-index: 3; pointer-events: none; }
  .pad { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); width: clamp(96px, 26vmin, 150px); aspect-ratio: 1; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-family: var(--ui); color: var(--p-ink);
    background: var(--grain), #fff4dcd8; border: 5px solid #ffffffe0; box-shadow: 0 -1px 3px #4a1c0c40, 0 7px 0 #4a1c0c45; opacity: .82;
    transition: transform .06s, box-shadow .06s, opacity .06s; }
  .pad.slide { left: max(16px, env(safe-area-inset-left)); rotate: -4deg; }
  .pad.jump { right: max(16px, env(safe-area-inset-right)); rotate: 4deg; }
  .pad b { font-family: var(--logo); font-size: clamp(30px, 8vmin, 46px); line-height: 1; color: var(--p-orange); filter: drop-shadow(0 2px 0 #4a1c0c40); }
  .pad.slide b { color: var(--p-far); }
  .pad span { font-size: clamp(12px, 3.2vmin, 16px); line-height: 1.2; }
  .pad.on { opacity: .95; transform: translateY(6px) scale(.95); box-shadow: 0 -1px 3px #4a1c0c40, 0 1px 0 #4a1c0c45; background: var(--grain), #ffe7a8e0; }
  #speed { bottom: calc(max(18px, env(safe-area-inset-bottom)) + clamp(96px, 26vmin, 150px) + 12px); } /* 속도는 오른쪽 버튼 위 */
  #hint, #wait { max-width: calc(100% - 2 * clamp(96px, 26vmin, 150px) - 60px); white-space: normal; line-height: 1.35; } /* 가로: 두 버튼 사이 */
}
@media (pointer: coarse) and (max-width: 640px) { /* 좁은 화면: 안내 · 기다림 알약은 두 버튼 위로 */
  #hint, #wait { bottom: calc(max(18px, env(safe-area-inset-bottom)) + clamp(96px, 26vmin, 150px) + 12px); max-width: calc(100% - 32px); }
}
/* 부활 창: 판 위 반투명 막 + 카드 (광고 보고 한 번 더 · 남은 초) */
#revive-overlay { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 16px; background: #4a1c0c66; }
.rmodal { max-width: 360px; width: 100%; padding: 22px; background: var(--grain), var(--cream); color: var(--deep); border: 6px solid #fff; border-radius: 16px; text-align: center; box-shadow: var(--paper-sh); font-family: var(--ui); rotate: -1deg; }
.rmodal h3 { font-size: 25px; letter-spacing: -1px; margin: 4px 0 6px; color: var(--red-d); }
.rmodal .rsub { font-size: 15px; opacity: .85; margin: 0 0 6px; }
.rmodal .rlast { font-size: 14px; margin: -2px 0 8px; padding: 2px 10px; display: inline-block; border-radius: 8px; background: #4a1c0c14; color: var(--p-ink); }
.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 — 다른 게임과 같다) */
#ad { position: fixed; inset: 0; z-index: 30; background: #2a1028; 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: #3d1a3a; border: 3px dashed #8a5a86; display: flex; align-items: center; justify-content: center; }
.ad-slot { font-size: 28px; color: #e2b9de; }
.ad-actions { display: flex; gap: 12px; }
@keyframes hint-pulse { to { transform: translateX(-50%) scale(1.05); } }
#toast {
  position: absolute; left: 50%; top: 120px; transform: translateX(-50%); pointer-events: none; white-space: nowrap; z-index: 5;
  background: var(--cream); color: var(--deep); border: 3px solid #fff; border-radius: 10px; box-shadow: 0 3px 0 #4a1c0c40; padding: 3px 16px; font-family: var(--ui); font-size: 16px; opacity: 0; transition: opacity .25s;
}
#toast.show { opacity: 1; }
/* 부딪힘: 빨간 번쩍임 */
#flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(circle, #ff2a4a00 30%, #ff2a4acc); }
#flash.on { animation: flash .6s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* 연출 층 (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: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 18px 30px 20px;
  background: var(--grain), var(--p-paper); border: 7px solid #fff; box-shadow: var(--paper-sh), 0 24px 40px #4a1c0c55;
  color: var(--p-orange); 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: var(--grain), var(--p-near); color: var(--p-paper); }
.fx-banner.gold { background: var(--grain), var(--p-sun2); color: var(--p-ink); }
.fx-banner .ic { font-size: 50px; line-height: 1.1; }
.fx-banner .big { font-family: var(--logo); font-weight: 900; font-size: clamp(28px, 7vmin, 46px); line-height: 1.1; word-break: keep-all; text-shadow: 0 3px 0 #4a1c0c30; }
.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-family: var(--logo); font-weight: 900; font-size: 34px; color: var(--p-orange); -webkit-text-stroke: 7px var(--p-paper); paint-order: stroke fill; white-space: nowrap; animation: pop 1s ease-out forwards; filter: drop-shadow(0 3px 0 #4a1c0c60); }
.fx-pop.hot { color: var(--p-sun3); font-size: 42px; }
.fx-pop.gold { color: #ffc21a; font-size: 46px; }
.fx-pop.heal { color: #3fae4a; font-size: 40px; }
.fx-pop.hurt { color: #e23b2e; font-size: 36px; }
/* 위쪽 작은 알림 조각 (아이템 이름): 종이 띠가 톡 떨어졌다 올라간다 */
.fx-chip { position: absolute; left: 50%; top: 27%; transform: translateX(-50%); white-space: nowrap; font-family: var(--logo); font-weight: 900; font-size: clamp(20px, 4.5vmin, 30px);
  color: var(--p-ink); background: var(--grain), var(--p-sun2); border: 5px solid #fff; border-radius: 14px; padding: 4px 18px; box-shadow: var(--paper-sh); animation: chip 1.3s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.fx-chip.heal { background: var(--grain), #b6f5a0; } .fx-chip.magnet { background: var(--grain), #ffc0b8; } .fx-chip.boost { background: var(--grain), #ffd59a; } .fx-chip.giant { background: var(--grain), #d7c6ff; }
.fx-chip.course { top: 19%; font-size: clamp(16px, 3.6vmin, 24px); color: var(--p-paper); background: var(--grain), var(--p-near); padding: 2px 16px; } /* 긴 코스 시작: 더 작고 위에 (아이템 조각과 안 겹치게 따로 뜬다) */
@keyframes chip {
  0% { transform: translate(-50%, -30px) rotate(-6deg); opacity: 0; }
  15% { transform: translate(-50%, 0) rotate(2deg); opacity: 1; }
  80% { transform: translate(-50%, 0) rotate(0); opacity: 1; }
  100% { transform: translate(-50%, -24px); opacity: 0; }
}

@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; }
/* 배경: 커버처럼 해질녘 하늘 + 동심원 종이 해 + 종이 결, 아래에 오려 붙인 언덕 세 겹 (::before 분홍·주황, ::after 붉은 주황 + 짙은 갈색 땅) */
.screen.nin {
  background:
    var(--grain),
    radial-gradient(circle at 76% 30%, var(--p-sun3) 0 52px, var(--p-sun2) 53px 80px, var(--p-sun1) 81px 104px, #4a1c0c1c 105px 108px, transparent 109px),
    linear-gradient(180deg, var(--p-sky1), var(--p-sky2) 55%, var(--p-sky3));
}
.screen.nin::before, .screen.nin::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; filter: drop-shadow(0 -2px 3px #4a1c0c70); }
.screen.nin::before {
  height: 40vh;
  background:
    radial-gradient(ellipse 20% 46% at 14% 100%, var(--p-hill) 99%, transparent) ,
    radial-gradient(ellipse 22% 52% at 52% 100%, var(--p-hill) 99%, transparent),
    radial-gradient(ellipse 20% 40% at 86% 100%, var(--p-hill) 99%, transparent),
    radial-gradient(ellipse 18% 80% at 0% 100%, var(--p-far) 99%, transparent),
    radial-gradient(ellipse 20% 96% at 34% 100%, var(--p-far) 99%, transparent),
    radial-gradient(ellipse 18% 70% at 66% 100%, var(--p-far) 99%, transparent),
    radial-gradient(ellipse 20% 90% at 100% 100%, var(--p-far) 99%, transparent);
}
.screen.nin::after {
  height: 16vh;
  background:
    linear-gradient(transparent 55%, var(--p-ground) 55%),
    radial-gradient(ellipse 16% 70% at 6% 100%, var(--p-near) 99%, transparent),
    radial-gradient(ellipse 18% 62% at 40% 100%, var(--p-near) 99%, transparent),
    radial-gradient(ellipse 16% 74% at 72% 100%, var(--p-near) 99%, transparent),
    radial-gradient(ellipse 14% 58% at 100% 100%, var(--p-near) 99%, transparent);
}
.modal { background: #4a1c0c80; }

/* 로고: 무한(주황 테두리) + 달리기(청록 테두리), 위에 통통 튀며 달리는 🏃 */
.logo-wrap { position: relative; margin: 4px 0 6px; max-width: 100%; }
/* 로고 위 달리는 사람: 커버에서 오린 짙은 갈색 러너 + 주황 머리띠 (인라인 SVG) */
.logo-ic { width: 76px; height: 78px; line-height: 0; animation: hopRun .45s ease-in-out infinite alternate; display: inline-block; filter: drop-shadow(0 -1px 2px #4a1c0c80) drop-shadow(0 4px 0 #4a1c0c33); }
.logo-ic svg { width: 100%; height: 100%; display: block; }
@keyframes hopRun { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-14px) rotate(4deg); } }
/* 로고: 커버의 종이 글자 — 주황 글자 + 두꺼운 크림 종이 테두리 + 위로 살짝 · 아래로 진한 그림자 (오려 붙인 듯) */
.logo {
  font-family: var(--logo); font-weight: 900; font-size: 88px; line-height: 1.08; letter-spacing: 1px; color: var(--p-orange);
  -webkit-text-stroke: 16px var(--p-paper); paint-order: stroke fill;
  filter: drop-shadow(0 -1px 2px #4a1c0c80) drop-shadow(0 6px 0 #4a1c0c40) drop-shadow(0 12px 10px #4a1c0c30);
}
.logo span { color: var(--p-near); }
.tagline { font-size: 21px; margin: 34px 0; text-shadow: 0 2px 0 var(--txt-sh); }
.tagline b { font-weight: normal; color: var(--p-ink); text-shadow: 0 1px 0 #ffd88a; }

/* 흰 카드 (nin.css 의 카드에 메뉴 배치만 더한다) */
/* 카드: 크림 종이 조각 — 두꺼운 흰 테두리 + 아래 그림자 + 종이 결 */
.card { background: var(--grain), var(--p-paper); border: 6px solid #fff; border-radius: 16px; }
#title .card { rotate: -.8deg; }
.nin .card, .modal .card {
  box-shadow: var(--paper-sh);
  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; background: #fffaf0; border: 3px solid #f3d9a8; border-radius: 12px; }
.nin-input:focus { border-color: var(--p-orange); background: #fff; }
select.nin-input { background-color: #fffaf0; }
/* 알약: 종이 띠 — 크림 테두리 + 모서리 살짝 둥근 사각, 아래 진한 판지 그림자 */
.pill { margin: 14px 0; border: 4px solid var(--p-paper); border-radius: 14px; }
.pill.white { --bg: var(--p-paper); --sh: #d9b98a; color: var(--p-ink); border-color: #fff; }
.pill.yellow { 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; border: 3px solid var(--p-paper); border-radius: 12px; background: #fff4dc33; box-shadow: 0 5px 0 var(--shade); }
.card .link, .modal .link { background: #f7e6c4; border-color: #fff; box-shadow: 0 5px 0 #d9b98a; color: var(--p-ink); }
.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(--p-ink); text-shadow: none; }

/* 방 목록 위 인사 한 줄: 안녕, 이름! · ◀ 닉네임 바꾸기 · ℹ️ 게임 소개 */
.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(--p-ink); text-shadow: 0 1px 0 #ffd88a; }

.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: 900; font-size: 44px; line-height: 1.15; margin: 0 0 28px; color: var(--p-orange);
  -webkit-text-stroke: 10px var(--p-paper); paint-order: stroke fill; filter: drop-shadow(0 -1px 2px #4a1c0c80) drop-shadow(0 5px 0 #4a1c0c40);
}

/* 방 목록 위 내 최고 한 줄 */
.best-line { font-size: 17px; line-height: 1.4; margin: 0 0 12px; padding: 2px 16px; border-radius: 10px; background: var(--p-paper); color: var(--p-ink); border: 3px solid #fff; box-shadow: 0 3px 0 #4a1c0c40; }

/* 방 목록 */
#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 #fff; border-radius: 12px; background: #fffaf2;
  box-shadow: 0 4px 0 #e2c493; 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: 5px solid #fff; border-radius: 14px; background: var(--grain), var(--p-paper);
  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: 12px; background: var(--c); color: #fff; border: 4px solid var(--p-paper);

  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); }

/* 결과: 순위표 (온라인) · 거리 · 코인 · 점수 · 내 최고 (혼자: .rrow.solo) */
.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: 460px; margin: 18px 0 26px; gap: 8px; line-height: 1.4; }
.rrow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; width: 100%; color: var(--ink); font-size: 20px; padding: 6px 12px; border-radius: 14px; background: #fff3e4; border-left: 6px solid var(--c, var(--blue)); }
.rrow.solo { grid-template-columns: minmax(0, 1fr) auto; }
.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 .rp { font-size: 15px; color: #6b7280; white-space: nowrap; }
.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: 50px; font-family: var(--ui); -webkit-text-stroke-width: 10px; overflow-wrap: anywhere; }
  .logo-ic { width: 52px; height: 54px; }
  .card { border-width: 4px; } #title .card { padding: 14px 16px; } #title .pill { margin: 10px 0; border-width: 3px; } #title .nin-input { margin-bottom: 8px; }
  .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 { 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: 26px minmax(0, 1fr) auto auto auto; gap: 6px; padding: 5px 8px; }
  .rrow .rs { display: none; }
  .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; }
  /* 게임 화면: 거리는 작게, 모드는 숨김. 위 가운데 거리와 겹치지 않게 왼쪽 묶음(체력 · 스테이지 · 내 최고 · 시간)은 거리 아래로, 순위 띠는 4칸이 한 줄에(칸: 순위 · 이름 / 거리 / 막대) */
  #hud-dist { font-size: 50px; -webkit-text-stroke-width: 6px; }
  #hud-stars, #hud-score { font-size: 13px; }
  #hud-best, #hud-time { font-size: 14px; padding: 1px 10px; }
  #hud-hp { width: 170px; padding: 2px 8px 2px 4px; } #hud-hp .hp-ic { font-size: 16px; } #hud-hp .hp-bar { height: 11px; } #hud-hp .hp-n { font-size: 13px; }
  #hud-stage { font-size: 12px; max-width: 210px; } #hud-power { width: 32px; height: 32px; } #hud-power .pw-ic { font-size: 15px; }
  .hud-left { top: max(96px, calc(env(safe-area-inset-top) + 86px)); }
  #racers { top: calc(max(10px, env(safe-area-inset-top)) + 92px); left: 6px; right: 6px; gap: 5px; }
  #racers li { flex: 1 1 0; grid-template-columns: auto minmax(0, 1fr); gap: 1px 4px; padding: 3px 6px 5px 4px; }
  #racers li::before { width: 17px; height: 17px; font-size: 11px; }
  #racers li[data-rank="1"]::before { font-size: 13px; }
  #racers .rn { font-size: 12px; }
  #racers .rv { grid-column: 1 / -1; font-size: 11px; line-height: 1.1; }
  #racers .rv b { font-size: 16px; }
  #racers .bar { height: 4px; margin-top: 2px; }
  #racers:not(.hidden) ~ .hud-left { top: calc(max(10px, env(safe-area-inset-top)) + 158px); } /* 띠가 보이면(온라인) 왼쪽 묶음은 띠 아래로 */
  #racers:not(.hidden) ~ #toast { top: calc(max(10px, env(safe-area-inset-top)) + 158px); }
  #speed { font-size: 12px; }
  #hud-mode { display: none; }
  #hint, #wait { font-size: 13px; padding: 5px 12px; }
  #hint { white-space: normal; line-height: 1.35; } /* 두 버튼 안내(점프 · 슬라이드 · 2단 점프)는 좁은 화면에서 두 줄로 */
  #toast { top: 104px; }
  #ready b { font-size: 100px; }
}