/* 열혈 배구: 공용 /common/nin.css(토큰·카드·알약·입력칸·모달) 다음에 읽는다.
   화풍 = 커버 아트(games/volley/cover.svg)의 90년대 스포츠 만화: 노을 하늘(빨강 → 주황 → 살구) + 흰 집중선, 먹색(#1b1020) 굵은 윤곽,
   딱딱한 먹색 그림자, 기울어진 두꺼운 글자(노랑 · 흰 글자에 빨강 · 흰 · 먹색 겹 윤곽), 망점. 같은 클래스·같은 배치에 색·테두리·글자만 바꾼다.
   게임 화면(#hud)은 위 막대(서브 · 점수 · 모드 · 나가기) → 코트(캔버스 480:320, 화면에 맞춰 비율 유지) → 모바일 버튼 — 만화 컷 테두리 */
:root {
  --p-ink: #1b1020; --p-yellow: #fff35c; --p-pink: #ff5f8f; --p-sky: #bfe8ff;
  --p-red: #e8231a; --p-crimson: #c8102e; --p-blue: #2f6fd0; --p-sand: #ffd98f;
  --p-sun1: #ff5a3c; --p-sun2: #ff9a4a; --p-sun3: #ffd27a;
  --edge: 4px solid var(--p-ink);
  --hard: 5px 5px 0 var(--p-ink);
  /* 망점(스크린톤) · 집중선 — 배경 겹 */
  /* 만화 글자 바깥 윤곽: 흰 4방향 + 먹색 그림자 (text-shadow 는 획 위에 그려져 빨강 획을 가리므로 filter 로 글자 전체에 건다) */
  --pop: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(5px 5px 0 var(--p-ink));
  --tone: radial-gradient(circle, #1b10202e 1.6px, transparent 2px) 0 0 / 9px 9px;
  --rays: repeating-conic-gradient(from 3deg at 72% 26%, #ffffff66 0 1.6deg, transparent 1.6deg 7deg);
  --red: var(--p-red); --red-d: var(--p-ink);       /* 주 버튼(다음 ▶ · 혼자 하기 · 시작) */
  --blue: var(--p-blue); --blue-d: var(--p-ink);    /* 보조(방 만들기 · 입력칸 테두리) */
  --yellow: var(--p-yellow); --yellow-d: var(--p-ink);
  --green: #2fae5a; --ink: var(--p-ink);
  --card-sh: var(--hard);
  --team0: #3d9bff; --team1: #ff5f8f;               /* 🔵 왼쪽 · 🩷 오른쪽 */
}
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: var(--p-sun2); color: var(--p-ink);
  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; }

/* ---------- 게임 화면: 노을 + 망점 바탕, 위 막대와 코트가 한 장의 만화 컷 (먹색 4px 테두리 + 딱딱한 그림자) ---------- */
#hud {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  background: var(--tone), linear-gradient(var(--p-sun1), var(--p-sun2) 60%, var(--p-sun3));
}
.boardtop, #board { width: var(--bw, 960px); }
.boardtop {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  background: var(--p-yellow); color: var(--p-ink); font-size: 12px; font-weight: 900; font-style: italic; padding: 6px 12px 8px;
  border: var(--edge); border-bottom-width: 3px; border-radius: 0; letter-spacing: .5px; box-shadow: 7px 7px 0 var(--p-ink);
}
.boardtop span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud-score {
  font-family: "Arial Black", var(--logo); font-style: italic; font-size: 28px; line-height: 1; letter-spacing: 1px; color: #fff; text-align: center;
  -webkit-text-stroke: 5px var(--p-ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--p-ink);
}
#hud-score b { display: inline-block; min-width: 1.3em; font-weight: 900; }
#hud-score .s0 { color: #9fd2ff; text-align: right; } #hud-score .s1 { color: #ffc6de; text-align: left; }
#hud-score b.me { text-decoration: underline 3px var(--p-red); text-underline-offset: 4px; }
.hud-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
#hud-mode { text-align: right; font-size: 11px; min-width: 0; }
.boardtop .hud-leave { margin: -2px 0; } /* 나가기: 모드 오른쪽, 막대 높이를 거의 늘리지 않게 */
#board { position: relative; border: var(--edge); border-top: 0; border-radius: 0; overflow: hidden; background: var(--p-sand); box-shadow: 7px 7px 0 var(--p-ink); }
#game { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; touch-action: none; }
/* 안내 알약: 처음 3초 (조작 안내) — 먹색 띠에 노란 글자, 기울임 */
#hint {
  position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%) skewX(-8deg); pointer-events: none; white-space: nowrap; max-width: 94%;
  overflow: hidden; text-overflow: ellipsis; background: var(--p-ink); color: var(--p-yellow); border-radius: 0; padding: 5px 16px; font-weight: 900; font-size: 15px;
  box-shadow: 4px 4px 0 #ffffffb0; animation: hint-in .3s ease-out;
}
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 8px) skewX(-8deg); } }
/* 알림: 흰 말풍선 */
#toast {
  position: absolute; left: 50%; top: 10%; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  background: #fff; color: var(--p-ink); border: 3px solid var(--p-ink); border-radius: 999px; padding: 4px 16px; font-weight: 900; font-size: 16px;
  box-shadow: 3px 3px 0 var(--p-ink); opacity: 0; transition: opacity .25s;
}
#toast.show { opacity: 1; }
/* 모바일 버튼: 왼쪽 ◀ ▶ (누르고 있는 동안 이동), 오른쪽 점프(누르고 있기) · 강타(한 번) — 먹색 윤곽 + 딱딱한 그림자 */
.mobilecontrols { display: flex; justify-content: space-between; align-items: center; width: var(--bw, 960px); margin-top: 12px; padding: 0 8px; touch-action: none; user-select: none; }
.moves, .actions { display: flex; align-items: center; gap: 12px; }
.mobilecontrols button { font: inherit; border: var(--edge); cursor: pointer; color: var(--p-ink); touch-action: none; font-weight: 900; font-style: italic; }
.moves button { width: 66px; height: 62px; background: #fff; border-radius: 12px; font-size: 26px; box-shadow: 4px 4px 0 var(--p-ink); }
.jumpbtn { width: 70px; height: 70px; background: var(--p-sky); border-radius: 50%; font-size: 16px; box-shadow: 4px 4px 0 var(--p-ink); }
.hitbtn { width: 84px; height: 84px; background: var(--p-yellow); border-radius: 50%; font-size: 18px; box-shadow: var(--hard); }
.mobilecontrols button:active { transform: translate(4px, 4px); box-shadow: none; }

/* ══ 메뉴 화면: 90년대 스포츠 만화 (노을 + 집중선 + 바다·모래 띠, 먹색 윤곽 카드·버튼) ══ */
.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:
    linear-gradient(-7deg, var(--p-sand) 0 13%, var(--p-ink) 13% 13.6%, var(--p-blue) 13.6% 19%, transparent 19%),
    var(--rays),
    linear-gradient(var(--p-sun1), var(--p-sun2) 60%, var(--p-sun3));
}
.modal { background: #1b1020a6; }
/* 메뉴 위 흰 글자는 먹색 윤곽 (만화 대사처럼) */
.tagline, .hello.small, .controls, .room-title, .lobby-hint, #lobby-status, #res-hint, .msg, .res-title {
  text-shadow: 2px 0 0 var(--p-ink), -2px 0 0 var(--p-ink), 0 2px 0 var(--p-ink), 0 -2px 0 var(--p-ink), 2px 2px 0 var(--p-ink), -2px 2px 0 var(--p-ink), 2px -2px 0 var(--p-ink), -2px -2px 0 var(--p-ink), 4px 4px 0 var(--p-ink);
}

/* 공용 토큰 재정의: 카드 = 흰 컷 + 먹색 4px 테두리 + 딱딱한 그림자, 알약 = 먹색 윤곽 기울인 버튼, 입력칸 = 먹색 테두리 */
.card { border-radius: 4px; border: var(--edge); box-shadow: 7px 7px 0 var(--p-ink); color: var(--p-ink); }
.pill {
  border: 3px solid var(--p-ink); border-radius: 14px; font-weight: 900; font-style: italic; letter-spacing: .5px;
  box-shadow: 4px 4px 0 var(--p-ink); transform: skewX(-6deg);
  text-shadow: 2px 2px 0 #1b102066;
}
.pill:hover { filter: brightness(1.06); transform: skewX(-6deg) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--p-ink); }
.pill:active { transform: skewX(-6deg) translate(4px, 4px); box-shadow: 0 0 0 var(--p-ink); }
.pill:disabled { transform: skewX(-6deg); }
.pill.yellow, .pill.white, .lang-opt.on { text-shadow: none; }
.pill.hud-leave { transform: skewX(-6deg); border-width: 2px; box-shadow: 2px 2px 0 var(--p-ink); }
.pill.hud-leave:hover { transform: skewX(-6deg) translate(-1px, -1px); box-shadow: 3px 3px 0 var(--p-ink); }
.pill.hud-leave:active { transform: skewX(-6deg) translate(2px, 2px); box-shadow: none; }
.nin-input, select.nin-input { border: 3px solid var(--p-ink); border-radius: 8px; background-color: #fff; color: var(--p-ink); font-weight: 700; }
.nin-input:focus, select.nin-input:focus { border-color: var(--p-ink); background-color: #fffbd6; box-shadow: 0 0 0 3px var(--p-yellow); }
.link, .card .link, .modal .link {
  color: var(--p-ink); background: #fff; border: 3px solid var(--p-ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--p-ink); font-weight: 900; font-style: italic;
}
.link:hover, .card .link:hover, .modal .link:hover { background: var(--p-yellow); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--p-ink); }
.link:active, .card .link:active, .modal .link:active { transform: translate(3px, 3px); box-shadow: none; }

/* 로고: 커버처럼 기울인 두꺼운 글자 — 첫 말(BLAZING / 열혈)은 작은 노랑 + 빨강·흰 윤곽, 둘째 말(<span>)은 큰 흰 글자 + 빨강 · 흰 · 먹색 겹 윤곽.
   왼쪽 위에 흰 속도선, 옆에 커버의 파랑 젤리. 언어마다 길이가 달라 줄바꿈을 허락한다 */
.logo-wrap { position: relative; margin: 4px 0 6px; max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.logo-wrap::before {
  content: ""; position: absolute; left: -70px; right: 55%; top: 22%; bottom: 22%; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 9px, #ffffffcc 9px 13px, transparent 13px 24px);
  transform: skewY(-6deg);
  -webkit-mask: linear-gradient(90deg, transparent, #000 60%); mask: linear-gradient(90deg, transparent, #000 60%);
}
.logo-ic { width: 96px; height: auto; flex: none; transform: rotate(-8deg); animation: boing 1.2s ease-in-out infinite; }
@keyframes boing { 50% { transform: rotate(-8deg) translateY(-8px) scale(1.03, .97); } }
.logo {
  --o: var(--p-ink);
  font-family: "Arial Black", var(--logo); font-weight: 900; font-style: italic; font-size: 46px; line-height: 1.05; letter-spacing: 6px; color: var(--p-yellow);
  -webkit-text-stroke: 7px var(--p-crimson); paint-order: stroke fill;
  filter: var(--pop);
  transform: rotate(-6deg) skewX(-10deg);
}
.logo span { display: block; font-size: 88px; letter-spacing: 1px; color: #fff; margin-top: 2px; -webkit-text-stroke-width: 11px; }
.tagline { font-size: 21px; margin: 40px 0; font-weight: 700; }
.tagline b { font-weight: normal; color: var(--p-yellow); }

/* 카드 (nin.css 의 카드에 메뉴 배치만 더한다) */
.nin .card, .modal .card { display: flex; flex-direction: column; align-items: center; width: 400px; max-width: 100%; }
.card-title { margin-bottom: 10px; font-weight: 900; font-style: italic; }
.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; }
.msg { min-height: 22px; margin-top: 20px; color: var(--p-yellow); font-size: 17px; }
.card .msg { color: var(--p-red); text-shadow: none; }
#name-msg { margin-top: 10px; }
#name-msg:empty { display: none; }
.controls { font-size: 15px; }
.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 12px; }
.hello b { font-weight: normal; color: var(--p-yellow); }
.hello .link { font-size: 15px; padding: 4px 14px; min-height: 0; margin: 0; text-shadow: none; }
#rooms > .pill.big { margin: 8px 0; }
.nin h2 {
  font-family: "Arial Black", var(--logo); font-weight: 900; font-style: italic; font-size: 44px; line-height: 1.15; margin: 0 0 28px; color: #fff;
  -webkit-text-stroke: 8px var(--p-crimson); paint-order: stroke fill; transform: skewX(-10deg); filter: var(--pop);
}

/* 방 목록 */
#room-list { width: 520px; max-height: 46vh; overflow-y: auto; gap: 20px; padding: 14px; margin-bottom: 16px; }
#room-list .empty { color: #6b5a6b; padding: 26px 0; font-size: 18px; }
#room-list button.room {
  font: inherit; color: var(--p-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 var(--p-ink); border-radius: 8px; background: #fff;
  box-shadow: 3px 3px 0 var(--p-ink); transition: transform .08s;
}
#room-list button.room:hover { background: #fffbd6; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--p-ink); }
#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: #6b5a6b; }
#room-list .rcount { font-size: 16px; color: #fff; background: var(--p-blue); border: 2px solid var(--p-ink); border-radius: 999px; padding: 1px 10px; text-align: center; font-style: italic; }
.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-blue); }

/* 로비 */
.room-title { font-size: 28px; margin-bottom: 18px; }
.lobby-hint { font-size: 15px; }
.invite { display: flex; gap: 12px; margin: 28px 0 40px; width: 640px; max-width: 100%; }
.inv-code, .inv-link {
  font: inherit; color: var(--p-ink); cursor: pointer; border: var(--edge); border-radius: 6px; background: #fff;
  box-shadow: var(--hard); 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(-2px, -2px); box-shadow: 7px 7px 0 var(--p-ink); background: #fffbd6; }
.inv-code:active, .inv-link:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--p-ink); }
.inv-label { font-size: 14px; color: #6b5a6b; }
.inv-code b {
  font-family: "Arial Black", var(--logo); font-weight: 900; font-style: italic; font-size: 46px; letter-spacing: 8px; line-height: 1.1; color: var(--p-red);
  -webkit-text-stroke: 3px var(--p-ink); paint-order: stroke fill;
}
.inv-link { flex: 1; min-width: 0; }
#lobby-link-text { font-size: 20px; color: var(--p-blue); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-copy { font-size: 15px; color: #fff; background: var(--p-blue); border: 2px solid var(--p-ink); border-radius: 999px; padding: 2px 14px; margin-top: 4px; }
.copied .inv-copy, .inv-code.copied .inv-label { background: var(--p-red); color: #fff; border-radius: 999px; padding: 2px 14px; }
/* 2칸: 왼쪽 🔵(파랑) · 오른쪽 🩷(분홍), 연결 중 칸(깜빡임), 빈 칸은 점선(AI 가 채운다) */
#lobby-players { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 460px; max-width: 100%; }
#lobby-players .pl {
  font-size: 20px; line-height: 1.5; padding: 10px 14px; border-radius: 8px; background: var(--c); color: #fff; border: 3px solid var(--p-ink);
  box-shadow: 4px 4px 0 var(--p-ink); text-shadow: 2px 2px 0 var(--p-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#lobby-players .pl.me { outline: 3px solid var(--p-yellow); outline-offset: 2px; }
#lobby-players .pl.empty, #lobby-players .pl.pending { background: #ffffff30; color: #fff; border: 3px dashed var(--p-ink); box-shadow: none; text-shadow: 1px 1px 0 var(--p-ink); }
#lobby-players .pl.pending { animation: pl-pulse 1.2s ease-in-out infinite; }
@keyframes pl-pulse { 50% { opacity: .5; } }
#lobby-players .pl.t0 { --c: var(--team0); } #lobby-players .pl.t1 { --c: var(--team1); }
#lobby-status { margin: 26px 0 18px; font-size: 18px; }

/* 경기 결과 */
.res-hero { font-size: 70px; line-height: 1.1; }
.res-title { font-family: "Arial Black", var(--logo); font-weight: 900; font-style: italic; font-size: 44px; line-height: 1.3; color: var(--p-yellow); transform: skewX(-8deg); }
#res-score { width: 360px !important; font-size: 44px; line-height: 1.4; margin: 22px 0 30px; flex-direction: row !important; justify-content: center; gap: 14px; font-family: "Arial Black", var(--logo); font-style: italic; }
#res-score .s0 { color: var(--team0); } #res-score .s1 { color: var(--team1); }
#res-score .s0, #res-score .s1 { -webkit-text-stroke: 3px var(--p-ink); paint-order: stroke fill; }
#res-hint { font-size: 18px; margin: -12px 0 14px; }
.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(--p-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: var(--p-ink); font-size: 13px; line-height: 1.5; }
#title .privacy-link { color: var(--p-ink); text-decoration: underline; }
#title .privacy-link:hover { color: var(--p-red); }

/* 구석 버튼: 오른쪽 위 언어, 왼쪽 위 Gamepio 홈 · 계정 (포털 아래에서만) */
.corner { position: absolute; top: 14px; right: 14px; margin: 0; z-index: 3; }
.corner-l { position: absolute; top: 14px; left: 14px; z-index: 3; display: flex; gap: 8px; max-width: calc(100% - 180px); }
.corner-l .pill { margin: 0; white-space: nowrap; }
#account-btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 낮은 화면(1280×720 등): 타이틀·로비가 스크롤 없이 */
@media (min-width: 641px) and (max-height: 759px) {
  #title { line-height: 1.5; } #title .logo { font-size: 38px; } #title .logo span { font-size: 74px; } #title .logo-ic { width: 84px; }
  #title .tagline { margin: 12px 0 14px; } #title .card { padding: 14px 20px; }
  #title .pill { margin: 8px 0; } #title .nin-input { margin-bottom: 8px; } #name-msg { line-height: 1.4; }
  .invite { margin: 14px 0 18px; } #lobby-players { gap: 10px; } #lobby .lobby-hint { line-height: 1.6; } #lobby-status { margin: 12px 0 8px; }
}
@media (max-width: 640px) {
  .logo { font-size: 26px; letter-spacing: 4px; -webkit-text-stroke-width: 5px; }
  .logo span { font-size: 46px; -webkit-text-stroke-width: 8px; }
  .logo-ic { width: 60px; } .logo-wrap::before { left: -30px; }
  #hud-score { font-size: 22px; }
  .boardtop { gap: 6px; padding: 5px 8px 7px; }
  #hint { font-size: 12px; padding: 4px 12px; }
  #res-score { width: 100% !important; font-size: 36px; }
  .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-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; }
}