/* 빙글 드리프트: 공용 /common/nin.css(토큰·카드·알약·입력칸·모달) 다음에 읽는다.
   화풍 = 커버(cover.svg)의 로우폴리 포스터: 해 질 녘 노랑·주황 삼각 면(왼쪽 위) ↔ 청록 바다 삼각 면(오른쪽 아래), 대각선 아스팔트 길(빨강·흰 연석),
   큰 해 원반, 흰 기울인 장체 대문자 + 짙은 남색 그림자 + 체크무늬 띠. 판(카드·알약)은 모서리가 거의 없는 단색 면 + 블러 없는 남색 그림자.
   게임 화면(#hud)은 화면 가득 WebGL 캔버스(#stage) 위에 위 가운데 거리(큰 숫자)·코인·점수·트랙 진행 막대(#track 🚩 ~ 🏁), 그 아래 가로 참가자 순위 띠(#racers),
   왼쪽 위 트랙 이름 · 스톱워치 · 남은 시간(⏳) · 내 최고, 오른쪽 위 모드 · 나가기, 오른쪽 아래 속도 게이지(#speed, 브레이크 중 빨강 테두리),
   아래 가운데 조향 표시(#steer ◀ ▶) 사이 빨간 둥근 🛑 브레이크 버튼(#brake, 눌리면 .on), 연출 층(#fx), 빨간 번쩍임(#flash).
   폰(≤ 640): 왼쪽 묶음은 진행 막대 아래(온라인은 순위 띠 아래), 안내 알약·토스트는 아래 조향 줄 위(속도 게이지와 안 겹치게) */
:root {
  /* 팔레트 (커버에서) */
  --p-navy: #0b2545; --p-asphalt: #2b2f3f; --p-asphalt2: #3a3f55; --p-red: #e63946; --p-yellow: #ffe066; --p-gold: #ffd23f;
  --p-lemon: #fff1a0; --p-sand: #ffc669; --p-orange: #f6a850; --p-amber: #ef9a45; --p-teal: #20a8cf; --p-sea: #1a8eb0; --p-deep-sea: #15779b;
  --p-hard: 5px 5px 0 var(--p-navy);                                   /* 블러 없는 포스터 그림자 */
  --p-kerb: linear-gradient(90deg, var(--p-red) 50%, #fff 50%);      /* 연석 한 칸 (44px × 8px 로 가로 반복) */
  --p-check: repeating-conic-gradient(#111 0 25%, #fff 0 50%);        /* 체크무늬 한 칸 (2 × 2) */
  /* 공용 토큰 → 포스터 */
  --ink: #fff; --sub: #b8bfd6;
  --red: var(--p-red); --red-d: #9b1d29;            /* 주 버튼(다음 ▶ · 혼자 하기 · 시작) */
  --blue: var(--p-sea); --blue-d: #0b4f6c;          /* 보조(방 만들기) */
  --yellow: var(--p-gold); --yellow-d: #b8860b;
  --card-sh: var(--p-hard);
  --logo: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", var(--ui);
}
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: var(--p-orange); 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: none;
}
.hidden { display: none !important; }

/* ---------- 게임 화면 ---------- */
#hud { position: fixed; inset: 0; overflow: hidden; background: var(--p-orange); touch-action: none; cursor: pointer; -webkit-touch-callout: none; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
/* 포스터 글자: 흰 장체 기울임 + 남색 테두리 + 남색 비낀 그림자 (거리 · 준비 숫자 · 팝업 · 배너가 같이 쓴다) */
#hud-dist, #ready b, .fx-pop, .sp-label b {
  font-family: var(--logo); font-weight: 900; font-style: italic; color: #fff; letter-spacing: 1px;
  -webkit-text-stroke: 2px var(--p-navy); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--p-navy);
}
/* 단색 판 (HUD 작은 글자판 공용) */
#hud-coins, #hud-score, #hud-mode, #toast { background: var(--p-navy); color: #fff; border-radius: 3px; white-space: nowrap; box-shadow: 3px 3px 0 #0b254566; }
/* 위 가운데: 거리(큰 숫자 · 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: #fff;
}
.hud-dist { display: flex; align-items: baseline; gap: 4px; }
.hud-dist span { font-size: 22px; font-family: var(--logo); font-style: italic; -webkit-text-stroke: 4px var(--p-navy); paint-order: stroke fill; }
#hud-dist { font-size: 66px; line-height: 1; 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: 6px; }
#hud-coins, #hud-score { font-size: 16px; padding: 2px 12px; }
#hud-coins { color: var(--p-yellow); }
/* 트랙 진행 막대 (거리 아래): 🚩 ~ 🏁 사이 기울인 아스팔트 띠(노란 점선) 위에 차마다 점(자리 색), 나는 크게 · 흰 테두리 */
#track { display: flex; align-items: center; gap: 6px; width: 240px; margin-top: 7px; }
#track .tk-end { font-size: 15px; line-height: 1; filter: drop-shadow(1px 1px 0 var(--p-navy)); }
#track-line { position: relative; flex: 1; height: 10px; }
#track-line::before {
  content: ""; position: absolute; inset: 0; transform: skewX(-20deg); border: 2px solid var(--p-navy); box-shadow: 3px 3px 0 #0b254566;
  background: linear-gradient(90deg, var(--p-yellow) 50%, transparent 0) center / 10px 2px repeat-x, var(--p-asphalt);
}
#track-line .dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c); border: 2px solid var(--p-navy); transition: left .3s linear; }
#track-line .dot.me { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-color: #fff; box-shadow: 2px 2px 0 var(--p-navy); z-index: 1; }
#track-line .dot.dead { opacity: .4; }
@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, #hud-left { font-size: 17px; color: var(--p-navy); background: #fff; border: 3px solid var(--p-navy); border-radius: 3px; padding: 1px 12px; box-shadow: 3px 3px 0 var(--p-navy); white-space: nowrap; }
#hud-time { font-variant-numeric: tabular-nums; min-width: 96px; }
#hud-time.fin { background: var(--p-gold); }
#hud-track { font-size: 14px; color: var(--p-yellow); background: var(--p-navy); border-radius: 3px; padding: 2px 10px; box-shadow: 3px 3px 0 #0b254566; white-space: nowrap; }
#hud-best:empty, #hud-track:empty { display: none; }
#hud-left { color: #fff; background: var(--p-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; padding: 3px 10px; }
.hud-leave { margin: 0; }
/* 참가자 순위 띠 (거리 아래 가로, 온라인): 순위 순 포스터 칩 한 줄 — 순위(::before ← data-rank, 1등 👑) · 이름 · 거리(큰 숫자 + m) / 아래 자리 색 막대.
   나 = 흰 테두리 + 자리 색 그림자, 추락·나감 = 흐리게. 아래 #toast 는 띠가 보이면 띠 밑으로 */
#racers {
  position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 136px); 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: 5px 10px 6px 6px; color: #fff; background: #0b2545e8; border-left: 6px solid var(--c); border-radius: 3px; box-shadow: 4px 4px 0 #0b254566;
  transition: opacity .3s;
}
#racers li::before {
  content: attr(data-rank); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font: italic 900 15px var(--logo); color: var(--p-navy); background: #fff; border-radius: 2px; transform: skewX(-8deg);
}
#racers li[data-rank="1"]::before { content: "👑"; background: none; transform: none; font-style: normal; font-size: 17px; filter: drop-shadow(1px 1px 0 var(--p-navy)); }
#racers li.me { background: var(--p-navy); outline: 3px solid #fff; outline-offset: -3px; box-shadow: 4px 4px 0 var(--c); }
#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: italic 14px var(--logo); color: var(--p-yellow); white-space: nowrap; }
#racers .rv b { font-size: 21px; font-weight: 900; margin-right: 1px; letter-spacing: .5px; }
#racers .bar { grid-column: 1 / -1; display: block; height: 5px; background: #ffffff22; overflow: hidden; }
#racers .bar i { display: block; height: 100%; background: var(--c); transition: width .3s; }
#racers li.fin .rv b { display: none; } /* 완주자: <b> 는 거리 숫자 그대로(숨김), 보이는 값은 🏁 시간 */
#racers .rv em { font-style: italic; font-size: 16px; font-weight: 900; color: var(--p-gold); }
#racers:not(.hidden) ~ #toast { top: calc(max(10px, env(safe-area-inset-top)) + 204px); }
/* 속도 게이지 (오른쪽 아래): km/h 숫자 + 연석 무늬 틀 안 막대 (느림 청록 → 빠름 빨강) */
#speed { position: absolute; right: 12px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 3; pointer-events: none; width: 150px; font-family: var(--ui); color: #fff; text-align: right; text-shadow: 2px 2px 0 var(--p-navy); }
.sp-label { font-size: 14px; }
.sp-label b { font-size: 28px; text-shadow: 3px 3px 0 var(--p-navy); }
.sp-bar { display: block; height: 12px; margin-top: 2px; background: var(--p-navy); border: 2px solid var(--p-navy); box-shadow: 3px 3px 0 #0b254566; overflow: hidden; transform: skewX(-20deg); }
#speed.brake .sp-bar { border-color: var(--p-red); box-shadow: 0 0 0 2px var(--p-red), 3px 3px 0 #0b254566; }
#speed-fill { display: block; height: 100%; width: 4%; background: linear-gradient(90deg, var(--p-teal), var(--p-yellow), var(--p-red)); background-size: 150px 100%; transition: width .3s; }
/* 조향 표시 (아래 가운데): 도는 쪽 ◀(.l) · ▶(.r) 만 켜진다 — 기울인 단색 판. 사이에 진짜 버튼 🛑 #brake (빨간 원판 + 흰 테 + 남색 그림자, 눌리면 .on 들어간다) */
#steer { position: absolute; left: 50%; bottom: max(70px, calc(env(safe-area-inset-bottom) + 56px)); transform: translateX(-50%); z-index: 3; pointer-events: none; display: flex; align-items: center; gap: 14px; font-family: var(--ui); }
#brake {
  pointer-events: auto; touch-action: none; cursor: pointer; width: 76px; height: 76px; padding: 0; margin: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #fff;
  background: radial-gradient(circle at 36% 30%, #ff7a84, var(--p-red) 55%, #b51f2d); border: 4px solid #fff; outline: 3px solid var(--p-navy);
  box-shadow: 5px 5px 0 var(--p-navy); transition: transform .06s, box-shadow .06s; -webkit-tap-highlight-color: transparent;
}
#brake span { font-size: 24px; line-height: 1; }
#brake small { font: italic 900 13px var(--logo); letter-spacing: 1px; -webkit-text-stroke: 3px var(--p-navy); paint-order: stroke fill; }
#brake.on { transform: translate(4px, 4px) scale(.94); box-shadow: 1px 1px 0 var(--p-navy); border-color: var(--p-yellow); background: radial-gradient(circle, #ff3344, #9b1d29 75%); }
#steer b { width: 48px; height: 44px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: #0b254599; border: 3px solid #ffffffa0; transform: skewX(-12deg); transition: transform .1s, background .1s; }
#steer.l .l, #steer.r .r { background: var(--p-red); border-color: #fff; box-shadow: 4px 4px 0 var(--p-navy); transform: skewX(-12deg) scale(1.12); }
/* 준비 숫자 (ready 3·2·1 — 혼자·온라인) */
#ready { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#ready b { font-size: 150px; -webkit-text-stroke-width: 4px; text-shadow: 9px 9px 0 var(--p-navy); 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-yellow); color: var(--p-navy); border: 3px solid var(--p-navy); border-radius: 3px; padding: 5px 18px;
  font-family: var(--ui); font-size: 17px; box-shadow: var(--p-hard); animation: hint-pulse 1s ease-in-out infinite alternate;
}
#wait { background: #fff; animation: none; }
/* 부활 창: 판 위 남색 막 + 아스팔트 카드(위에 연석 띠) */
#revive-overlay { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 16px; background: #0b254577; }
.rmodal {
  max-width: 360px; width: 100%; padding: 22px; background: var(--p-kerb) left top / 44px 8px repeat-x, var(--p-asphalt); color: #fff;
  border: 3px solid var(--p-navy); border-radius: 4px; text-align: center; box-shadow: 8px 8px 0 var(--p-navy); font-family: var(--ui);
}
.rmodal h3 { font-size: 25px; letter-spacing: -1px; margin: 8px 0 8px; }
.rmodal .rsub { font-size: 15px; opacity: .85; margin: 0 0 6px; }
.rmodal small { display: block; font-size: 12px; opacity: .75; 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: var(--p-navy); 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(--p-yellow); color: var(--p-navy); border-radius: 2px; padding: 1px 8px; margin-right: 4px; line-height: 1.5; }
.ad-box { width: 640px; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--p-asphalt); border: 3px dashed var(--p-asphalt2); display: flex; align-items: center; justify-content: center; }
.ad-slot { font-size: 28px; color: var(--sub); }
.ad-actions { display: flex; gap: 12px; }
@keyframes hint-pulse { to { transform: translateX(-50%) scale(1.05); } }
#toast {
  position: absolute; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 136px); transform: translateX(-50%); pointer-events: none; z-index: 5;
  padding: 4px 16px; font-family: var(--ui); font-size: 16px; opacity: 0; transition: opacity .25s;
}
#toast.show { opacity: 1; }
/* 다른 차 이름표 (render3d 가 매 프레임 차 위로 옮긴다): 남색 판 + 자리 색 테두리 · 국기 이름, 멀면 작고 흐리게 */
#tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
#tags .tag {
  position: absolute; left: 0; top: 0; max-width: 120px; padding: 1px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--ui); font-size: 13px; line-height: 1.4; color: #fff; background: #0b2545d0; border: 2px solid var(--c); border-radius: 3px;
  box-shadow: 2px 2px 0 #0b254566; will-change: transform; transition: opacity .2s, font-size .2s;
}
#tags .tag.far { font-size: 10px; opacity: .55; }
/* 죽음: 빨간 번쩍임 */
#flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(circle, #e6394600 30%, #e63946cc); }
#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 {
  --face: var(--p-asphalt); --edge: var(--p-kerb); --edge-sz: 44px 8px;
  position: absolute; left: 50%; top: 45%; min-width: min(78vw, 300px); max-width: 90vw; border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 22px 34px 24px;
  background: var(--edge) left top / var(--edge-sz) repeat-x, var(--edge) left bottom / var(--edge-sz) repeat-x, var(--face);
  border: 3px solid var(--p-navy); box-shadow: 8px 8px 0 var(--p-navy);
  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 { --face: var(--p-red); --edge: var(--p-check); --edge-sz: 8px 8px; }
.fx-banner.gold { --face: var(--p-gold); --edge: var(--p-check); --edge-sz: 8px 8px; color: var(--p-navy); }
.fx-banner .ic { font-size: 50px; line-height: 1.1; }
.fx-banner .big {
  font-family: var(--logo); font-weight: 900; font-style: italic; letter-spacing: 2px; font-size: clamp(30px, 7.4vmin, 50px); line-height: 1.1; word-break: keep-all;
  color: #fff; -webkit-text-stroke: 2px var(--p-navy); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--p-navy);
}
.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(-3deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
}
.fx-pop { position: absolute; transform: translate(-50%, -50%); font-size: 36px; white-space: nowrap; animation: pop 1s ease-out forwards; }
.fx-pop.hot { color: var(--p-gold); font-size: 44px; }
@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 at 80% 22%, var(--p-lemon) 0 min(15vh, 16vw), #fff8c8 min(15vh, 16vw) calc(min(15vh, 16vw) + 3px), #fff1a040 calc(min(15vh, 16vw) + 4px), transparent calc(min(15vh, 16vw) + 40px)),
    linear-gradient(-24deg, transparent 0 15%, #fff 15% 16%, var(--p-asphalt) 16% 25%, var(--p-red) 25% 26.4%, transparent 26.4%),
    linear-gradient(60deg, transparent 50%, #ffffff1c 50%) 0 0 / 140px 242px,
    linear-gradient(-60deg, transparent 50%, #0b25451a 50%) 0 0 / 140px 242px,
    linear-gradient(120deg, #0b254512 50%, transparent 50%) 70px 121px / 140px 242px,
    linear-gradient(-120deg, #ffffff14 50%, transparent 50%) 70px 121px / 140px 242px,
    linear-gradient(72deg, transparent 50%, #ffffff12 50%) 30px 0 / 230px 330px,      /* 다른 크기의 삼각 격자를 겹쳐 규칙성을 깬다 */
    linear-gradient(-48deg, transparent 50%, #0b254512 50%) 90px 40px / 190px 270px,
    linear-gradient(160deg, var(--p-lemon) 0%, var(--p-sand) 26%, var(--p-orange) 44%, var(--p-amber) 52%, var(--p-teal) 52.2%, var(--p-sea) 70%, var(--p-deep-sea) 100%);
}
.modal { background: #0b2545aa; }

/* 로고: 흰 기울인 장체 대문자 + 남색 테두리·비낀 그림자, 아래 체크무늬 띠. 위에 커버의 빨간 경주차(흰 줄무늬 · 연기) */
.logo-wrap { position: relative; margin: 4px 0 6px; max-width: 100%; }
.logo-ic { display: block; width: 150px; height: 64px; margin: 0 auto; animation: swerve 1.6s ease-in-out infinite alternate; }
@keyframes swerve { from { transform: translateX(-30px) rotate(-6deg); } to { transform: translateX(30px) rotate(6deg); } }
.logo {
  font-family: var(--logo); font-weight: 900; font-style: italic; font-size: 92px; line-height: 1.05; letter-spacing: 4px; text-transform: uppercase; color: #fff;
  -webkit-text-stroke: 3px var(--p-navy); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--p-navy);
  transform: skewX(-10deg); display: inline-block; padding: 0 .1em;
}
.logo span { color: var(--p-yellow); }
.logo::after { content: ""; display: block; height: 14px; margin: 6px 4% 0; background: var(--p-check) 0 0 / 14px 14px; border: 2px solid var(--p-navy); box-shadow: 4px 4px 0 var(--p-navy); }
.tagline { font-size: 21px; margin: 34px 0; text-shadow: 2px 2px 0 var(--p-navy); }
.tagline b { font-weight: normal; color: var(--p-yellow); }

/* 카드: 아스팔트 단색 판 + 위 연석 띠 + 남색 포스터 그림자 */
.nin .card, .modal .card {
  background: var(--p-kerb) left top / 44px 8px repeat-x, var(--p-asphalt); color: #fff; border: 3px solid var(--p-navy); border-radius: 4px; box-shadow: 8px 8px 0 var(--p-navy);
  padding-top: 26px; 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; color: #fff; background: var(--p-asphalt2); border: 3px solid #4e5470; border-radius: 3px; }
.nin-input::placeholder { color: #9aa1bb; }
.nin-input:focus { background: var(--p-asphalt2); border-color: var(--p-yellow); }
select.nin-input, select.nin-input:focus {
  background: var(--p-asphalt2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%23ffe066' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 16px 10px;
}
select.nin-input option { background: var(--p-asphalt); color: #fff; }

/* 알약 → 각진 단색 판: 모서리 4px, 남색 테두리, 블러 없는 그림자(눌리면 들어간다) */
.pill { border: 3px solid var(--p-navy); border-radius: 4px; box-shadow: 4px 4px 0 var(--p-navy); text-shadow: 2px 2px 0 #0b254566; }
.pill:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--p-navy); }
.pill:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--p-navy); }
.pill.yellow, .pill.white { color: var(--p-navy); text-shadow: none; }
.pill.white { --sh: var(--p-navy); }
.pill.big { font-family: var(--logo); font-style: italic; letter-spacing: 1px; }
.pill { margin: 14px 0; }
.pill.big { font-size: 26px; padding: 13px 0; }
.screen > .pill.big { width: 340px; max-width: 100%; }
.pill.hud-leave, .pill.hud-leave:hover { box-shadow: 3px 3px 0 var(--p-navy); }
.link, .card .link, .modal .link {
  font-size: 21px; padding: 10px 30px; min-height: 50px; margin-top: 16px;
  color: var(--p-navy); background: #fff; border: 3px solid var(--p-navy); border-radius: 4px; box-shadow: 4px 4px 0 var(--p-navy);
}
.link:hover, .card .link:hover, .modal .link:hover { background: var(--p-lemon); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--p-navy); }
.link:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--p-navy); }
.msg { min-height: 22px; margin-top: 20px; color: #fff; font-size: 17px; text-shadow: 2px 2px 0 var(--p-navy); }
.card .msg { color: var(--p-yellow); text-shadow: none; }
#name-msg { margin-top: 10px; }
#name-msg:empty { display: none; }
.controls { font-size: 15px; opacity: .95; text-shadow: 2px 2px 0 var(--p-navy); }
.controls b { font-weight: normal; color: var(--p-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: 2px 2px 0 var(--p-navy); }
.hello b { font-weight: normal; color: var(--p-yellow); }
.hello .link { font-size: 15px; padding: 3px 14px; min-height: 0; margin: 0; box-shadow: 3px 3px 0 var(--p-navy); text-shadow: none; }
#rooms > .pill.big { margin: 8px 0; }
/* 화면 제목: 로고와 같은 포스터 글자 */
.nin h2, .res-title {
  font-family: var(--logo); font-weight: 900; font-style: italic; letter-spacing: 2px; text-transform: uppercase; color: #fff;
  -webkit-text-stroke: 2px var(--p-navy); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--p-navy);
}
.nin h2 { font-size: 46px; line-height: 1.15; margin: 0 0 28px; }

/* 방 목록 위 내 최고 한 줄 */
.best-line { font-size: 17px; line-height: 1.4; margin: 0 0 12px; padding: 3px 16px; border-radius: 3px; background: var(--p-navy); color: var(--p-yellow); box-shadow: 3px 3px 0 #0b254566; }

/* 방 목록 */
#room-list { width: 520px; max-height: 34vh; overflow-y: auto; gap: 14px; padding: 14px; padding-top: 22px; margin-bottom: 12px; }
#room-list .empty { color: var(--sub); padding: 18px 0; font-size: 18px; }
#room-list button.room {
  font: inherit; color: #fff; cursor: pointer; width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  text-align: left; font-size: 19px; padding: 10px 16px; border: 0; border-left: 6px solid var(--p-yellow); border-radius: 2px; background: var(--p-asphalt2);
  transition: transform .08s, background .12s;
}
#room-list button.room:hover { background: #474d68; border-left-color: var(--p-red); transform: translateX(3px); }
#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: var(--sub); }
#room-list .rcount { font-size: 16px; color: var(--p-navy); background: var(--p-yellow); border-radius: 2px; padding: 2px 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(--p-red); }

/* 로비 */
.room-title { font-size: 28px; margin-bottom: 18px; text-shadow: 2px 2px 0 var(--p-navy); }
.lobby-hint { font-size: 15px; opacity: .95; text-shadow: 1px 1px 0 var(--p-navy); }
.invite { display: flex; gap: 12px; margin: 28px 0 34px; width: 640px; max-width: 100%; }
.inv-code, .inv-link {
  font: inherit; color: var(--p-navy); cursor: pointer; border: 3px solid var(--p-navy); border-radius: 4px; background: #fff;
  box-shadow: 5px 5px 0 var(--p-navy); 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: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--p-navy); background: var(--p-lemon); }
.inv-code:active, .inv-link:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--p-navy); }
.inv-label { font-size: 14px; color: #5b6380; }
.inv-code b { font-family: var(--logo); font-weight: 900; font-style: italic; font-size: 48px; letter-spacing: 8px; line-height: 1.1; color: var(--p-red); }
.inv-link { flex: 1; min-width: 0; }
#lobby-link-text { font-size: 20px; color: var(--p-sea); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-copy { font-size: 15px; color: #fff; background: var(--p-navy); border-radius: 2px; padding: 2px 14px; margin-top: 4px; }
.copied .inv-copy, .inv-code.copied .inv-label { background: var(--p-red); color: #fff; border-radius: 2px; padding: 2px 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: 3px; background: var(--c); color: #fff; border: 3px solid var(--p-navy);
  box-shadow: 5px 5px 0 var(--p-navy); text-shadow: 2px 2px 0 #0b254599; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#lobby-players .pl.me { outline: 3px dashed #fff; outline-offset: 3px; }
#lobby-players .pl.empty, #lobby-players .pl.pending { background: #0b254540; color: #ffffffd0; border: 3px dashed #fff; 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: 2px 2px 0 var(--p-navy); }

/* 결과: 순위표 (온라인) · 거리 · 코인 · 점수 · 내 최고 (혼자: .rrow.solo) */
.res-hero { font-size: 70px; line-height: 1.1; filter: drop-shadow(4px 4px 0 var(--p-navy)); }
.res-title { font-size: 46px; line-height: 1.3; }
.res-track { font-size: 17px; line-height: 1.4; margin-top: 2px; color: var(--p-yellow); background: var(--p-navy); padding: 1px 14px; border-radius: 3px; box-shadow: 3px 3px 0 #0b254566; }
.res-track:empty { display: none; }
#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: #fff; font-size: 20px; padding: 6px 12px; border-radius: 2px; background: var(--p-asphalt2); border-left: 6px solid var(--c, var(--p-yellow)); }
.rrow.solo { grid-template-columns: minmax(0, 1fr) auto; }
.rrow.win { background: #4a4430; outline: 3px solid var(--p-gold); }
.rrow.me .rn::after { content: " ✦"; color: var(--p-red); }
.rrow .rk { font-size: 22px; text-align: center; }
.rrow .rp { font-size: 15px; color: var(--sub); white-space: nowrap; }
.rrow .rn { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .rs { font-size: 14px; color: var(--sub); white-space: nowrap; }
.rrow .rv { font-size: 18px; color: var(--p-yellow); white-space: nowrap; }
#res-hint { font-size: 18px; margin: -12px 0 14px; text-shadow: 2px 2px 0 var(--p-navy); }
.res-row { display: flex; gap: 12px; justify-content: center; flex-wrap: nowrap; margin: 12px 0; }
.res-row .pill { margin: 0; font-size: 22px; padding: 13px 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(--p-yellow); --sh: var(--p-navy); color: var(--p-navy); }

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

/* 구석 버튼: 오른쪽 위 언어, 왼쪽 위 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: 72px; } #title .logo-ic { height: 52px; } #title .tagline { margin: 10px 0 14px; } #title .card { padding: 22px 20px 14px; }
  #title .pill { margin: 8px 0; } #title .nin-input { margin-bottom: 8px; } #name-msg { line-height: 1.4; }
  #rooms h2 { margin-bottom: 18px; font-size: 40px; } #rooms > .pill.big { margin: 5px 0; font-size: 22px; padding: 9px 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; letter-spacing: 2px; -webkit-text-stroke-width: 2px; text-shadow: 4px 4px 0 var(--p-navy); }
  .logo::after { height: 10px; }
  .tagline { font-size: 17px; margin: 24px 0; }
  .nin h2 { font-size: 34px; }
  .link { font-size: 18px; padding: 9px 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: 34px; }
  #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: 52px; }
  #hud-coins, #hud-score { font-size: 13px; }
  #track { width: 200px; margin-top: 5px; }
  #hud-best, #hud-time, #hud-left { font-size: 14px; padding: 1px 10px; }
  #hud-time { min-width: 80px; }
  #hud-track { font-size: 12px; padding: 1px 8px; }
  .hud-left { top: calc(max(10px, env(safe-area-inset-top)) + 112px); gap: 5px; }
  #racers { top: calc(max(10px, env(safe-area-inset-top)) + 114px); left: 6px; right: 6px; gap: 5px; }
  #racers li { flex: 1 1 0; grid-template-columns: auto minmax(0, 1fr); gap: 1px 4px; padding: 4px 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 li.fin .rv em { font-size: 12px; }
  #racers:not(.hidden) ~ .hud-left { top: calc(max(10px, env(safe-area-inset-top)) + 174px); } /* 띠가 보이면(온라인) 왼쪽 묶음은 띠 아래로 */
  #toast, #racers:not(.hidden) ~ #toast { top: auto; bottom: max(200px, calc(env(safe-area-inset-bottom) + 186px)); }
  #speed { width: 110px; } .sp-label b { font-size: 22px; }
  #steer { gap: 10px; }
  #steer b { width: 42px; height: 40px; font-size: 17px; }
  #brake { width: 68px; height: 68px; } #brake span { font-size: 21px; } #brake small { font-size: 11px; }
  #hud-mode { display: none; }
  #hint, #wait { font-size: 13px; padding: 5px 12px; }
  #hint, #wait { bottom: max(152px, calc(env(safe-area-inset-bottom) + 138px)); } /* 조향 줄 위 — 오른쪽 아래 속도 게이지와 겹치지 않게 */
  #ready b { font-size: 100px; }
}