:root {
  --fire: #ff5a3c;
  --water: #3aa0ff;
  --grass: #46d65a;
  --bg: #0e1320;
  --panel: #161d2e;
  --ink: #e9eef7;
  --muted: #8a96ad;
  /* readability / surface tokens (menu·rank·invite·skin) */
  --muted-2: #9fabc2;
  --line: rgba(255,255,255,.09);
  --field: #0e1422;
  --field-line: #243049;
  --gold: #ffd45e;
  --silver: #cdd7e6;
  --bronze: #e0915a;
  --ad-banner-height: 0px;
  --ad-banner-gap: 8px;
}

@font-face {
  font-family: 'Jua';
  src: url('fonts/Jua-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  color: var(--ink);
  user-select: none;
}
#game { display: block; position: fixed; inset: 0; touch-action: none; }
button, input, summary { -webkit-tap-highlight-color: transparent; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid #7fe0ff; outline-offset: 3px;
}
a:focus-visible { outline: 3px solid #7fe0ff; outline-offset: 2px; border-radius: 4px; }

/* ── overlay & panel ── */
.overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  /* 게임 캔버스(#game)는 오버레이 밖이라 최상단까지 꽉 차고, 메뉴/결과 패널만 노치·상태바를 피한다. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: radial-gradient(120% 120% at 50% 30%, rgba(20,28,46,.55), rgba(8,11,18,.92));
  backdrop-filter: blur(3px);
}
.hidden { display: none !important; }
.panel {
  position: relative;
  width: min(92vw, 420px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 120px),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  text-align: center;
}
.lang-toggle {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.07); color: var(--ink);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 12px; font-weight: 700; letter-spacing: .3px; cursor: pointer;
}
.lang-toggle:hover { background: rgba(255,255,255,.14); }

.logo {
  font-size: 46px; font-weight: 800; letter-spacing: 1px; line-height: 1.05;
  background: linear-gradient(90deg, var(--fire), var(--water), var(--grass));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(58,160,255,.22));
}
.logo img {
  display: block;
  width: 190px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 8px 18px rgba(55, 143, 255, .2));
}
.logo-en { display: none; }
html[lang="en"] .logo img { display: none; }
html[lang="en"] .logo-en {
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-family: 'Jua', ui-rounded, sans-serif;
  font-size: 32px;
  line-height: .84;
  letter-spacing: .06em;
  text-align: center;
  color: #7fd9ff;
  background: linear-gradient(105deg, #c799ff 8%, #69c6ff 50%, #72edb9 92%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 5px 0 #152a72) drop-shadow(0 9px 18px rgba(65, 151, 255, .25));
}
html[lang="en"] .logo-en b {
  display: block;
  margin-top: .18em;
  font-size: 1.28em;
  font-weight: 400;
  letter-spacing: .12em;
}
html[lang="ko"] .logo { font-size: 52px; letter-spacing: 6px; }
.tagline { color: var(--muted); margin: 6px 0 20px; font-size: 12.5px; letter-spacing: 2.5px; text-transform: uppercase; }
.label { color: var(--muted-2); font-size: 13px; margin: 18px 0 8px; }
.game-copy {
  width: fit-content; max-width: 100%; margin: 13px auto 8px; padding: 6px 10px;
  border-radius: 999px; color: #dce8fb; background: rgba(122,170,255,.09);
  border: 1px solid rgba(122,170,255,.16); font-size: 12px; font-weight: 700;
}

/* 패널 안의 모든 텍스트 입력칸(닉네임·초대코드·1:1코드·이메일) — 크고 또렷하게, 모바일 터치 친화적 */
.panel input:not([type]), .panel input[type="text"], .panel input[type="email"] {
  width: 100%; padding: 16px 16px; font-size: 18px; line-height: 1.2;
  background: var(--field); color: var(--ink);
  border: 1.5px solid var(--field-line); border-radius: 13px; text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.panel input:not([type]):focus, .panel input[type="text"]:focus, .panel input[type="email"]:focus {
  outline: none; border-color: var(--water); box-shadow: 0 0 0 3px rgba(58,160,255,.18);
}
.panel input::placeholder { color: #6b7790; }

.element-label {
  margin: 13px 2px -7px; color: var(--muted-2); text-align: left;
  font-size: 11.5px; line-height: 1.4;
}
/* 네이티브 AdMob 배너는 WebView 위에 겹쳐지므로 실제 높이만큼 메뉴 영역을 줄인다.
   팝업·플레이 화면에서는 native.js가 배너 자체를 숨긴다. */
body.ad-banner-visible #menu { bottom: calc(var(--ad-banner-height) + var(--ad-banner-gap)); }
body.ad-banner-visible #menu .panel {
  max-height: calc(100dvh - var(--ad-banner-height) - var(--ad-banner-gap) - env(safe-area-inset-bottom) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
}
body.ad-banner-visible::after {
  content: ''; position: fixed; z-index: 9; pointer-events: none;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--ad-banner-height) + env(safe-area-inset-bottom));
  background: rgba(8,11,18,.96);
}
/* (구 메뉴 속성 선택 #elements/.elem 스타일은 v0.2 '항상 랜덤' 전환으로 DOM과 함께 제거됨) */

/* ── buttons ── */
.modes { display: flex; gap: 10px; margin-top: 22px; }
.play {
  flex: 1; padding: 15px 0; font-size: 16px; font-weight: 800; cursor: pointer;
  color: #08101e; border: none; border-radius: 12px;
  background: linear-gradient(90deg, var(--water), var(--grass));
  box-shadow: 0 8px 20px rgba(58,160,255,.26);
  transition: transform .08s, filter .15s, box-shadow .15s;
}
.play:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 10px 24px rgba(58,160,255,.32); }
.play:active { transform: translateY(0); }
.play.ghost { background: #1d2740; color: var(--muted-2); box-shadow: none; }
.play.ghost:hover { background: #243150; filter: none; }
.play.ghost.danger { color: #ffc0c7; box-shadow: inset 0 0 0 1px rgba(255,104,120,.22); }
.play.ghost.danger:hover { background: rgba(125,40,52,.42); }
.play:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* 꼬리 코어 발동 버튼 — 장착했을 때만 나타나고 타입 색으로 즉시 구분 */
#t-item {
  position: absolute; pointer-events: auto; z-index: 6;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 116px);
  width: 62px; height: 62px; border-radius: 50%; font-size: 27px; cursor: pointer;
  background: #3d355f;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.36), color-mix(in srgb, var(--core-color, #b59cff) 62%, #18213a) 48%, rgba(16,22,38,.94));
  border: 2px solid rgba(255,255,255,.7); color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--core-color, #b59cff) 28%, transparent), 0 8px 22px color-mix(in srgb, var(--core-color, #b59cff) 42%, transparent);
}
#t-item:not(.cooling) { animation: core-ready 1.2s ease-in-out infinite; }
#t-item.cooling { opacity: .72; filter: saturate(.75); cursor: default; }
#t-item.active { border-color: var(--core-color, #b59cff); }
#t-item-icon { display: block; line-height: 1; }
@keyframes core-ready { 50% { transform: scale(1.06); filter: brightness(1.18); } }
#t-invite {
  position: absolute; pointer-events: auto; z-index: 6;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 186px);
  width: 62px; height: 62px; border-radius: 50%; font-size: 27px; cursor: pointer;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.3), rgba(124,199,255,.55) 45%, rgba(90,209,196,.65));
  border: 2px solid rgba(255,255,255,.7); color: #fff;
  box-shadow: 0 8px 22px rgba(124,199,255,.4);
}
@media (max-width: 560px) { #t-invite { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 266px); width: 56px; height: 56px; font-size: 24px; } }
#t-item-cd { position: absolute; right: -2px; top: -4px; min-width: 16px; padding: 1px 5px; border-radius: 999px; background: #ff5a6a; color: #fff; font-size: 12px; font-weight: 800; }
#t-item-cd:empty { display: none; }
@media (max-width: 560px) { #t-item { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 196px); width: 56px; height: 56px; font-size: 24px; } }

/* 카카오 로그인 버튼(옵션) — 카카오 공식 노랑 */
.kakao-btn {
  width: 100%; margin-top: 10px; padding: 14px; min-height: 52px;
  border: 1px solid #FEE500; border-radius: 18px; cursor: pointer; font-size: 15px; font-weight: 800;
  font-family: inherit;
  background-color: #FEE500; background-image: none; color: #191919;
  -webkit-text-fill-color: #191919;
  box-shadow: 0 6px 0 #c9b400, 0 12px 24px rgba(254,229,0,.18), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .18s var(--bounce-ease, ease), filter .18s ease, box-shadow .18s ease;
}
.kakao-btn:hover { filter: brightness(1.04); }
.kakao-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #c9b400, inset 0 1px 0 rgba(255,255,255,.4); }
.kakao-btn:focus-visible { outline: 3px solid rgba(254,229,0,.38); outline-offset: 3px; }

/* 친구 1:1 — 공개 플레이와 구분되는 파스텔 배틀 CTA */
.duel-btn { width: 100%; margin-top: 10px; background: linear-gradient(90deg, #ff9ed2, #b59cff); box-shadow: 0 8px 20px rgba(181,156,255,.3); }
.duel-btn:hover { box-shadow: 0 10px 24px rgba(181,156,255,.42); }
.invite-share { background: linear-gradient(90deg, #7cc7ff, #5ad1c4); }
.invite-url-label { display: block; margin-top: 14px; text-align: left; }
.invite-url-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 7px; }
.invite-url-row input { min-width: 0; margin: 0; padding: 11px 12px; font-size: 12px; color: #cfe8ff; background: rgba(8,16,30,.78); border: 1px solid rgba(124,199,255,.42); }
.invite-url-row button { padding: 0 15px; border: 1px solid rgba(124,199,255,.5); border-radius: 11px; cursor: pointer; color: #e9f8ff; background: rgba(58,160,255,.2); font-weight: 800; }
#duel .invite-url-label, #duel .invite-url-row { display: none; }
.game-menu-panel .modes { flex-direction: column; }
/* 대결 코드 박스도 핑크 파스텔로(전투감 대신 귀엽게) */
#duel-code { background: linear-gradient(180deg, rgba(255,158,210,.14), rgba(181,156,255,.06)); border-color: rgba(255,158,210,.55); color: #ffd9ee; }
.duel-tagline { margin: 8px 0 2px; color: #e8d9ff; font-size: 13px; font-weight: 800; letter-spacing: .7px; }

.help { margin-top: 18px; text-align: left; color: var(--muted); font-size: 12.5px; }
.help summary { cursor: pointer; text-align: center; }
.help ul { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.help li { min-width: 0; padding: 8px 9px; border-radius: 9px; color: var(--muted-2); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.05); font-size: 11.5px; line-height: 1.35; }
.help b { color: var(--ink); }

/* ── HUD ── */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#boost-fuel { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); width: 140px; height: 6px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; z-index: 6; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
body:has(#touch:not(.hidden)) #boost-fuel { display: none; } /* 터치 부스트 버튼 링이 게이지를 대신 — 중복 제거 */
#boost-fuel i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7fe0ff, #4aa8ff); transition: width .08s linear; }
#boost-fuel.low i { background: #ff7a4a; }
#score {
  position: absolute; top: 16px; left: 16px;
  background: rgba(14,20,34,.7); padding: 8px 14px; border-radius: 10px;
  font-size: 14px; color: var(--muted);
}
#score b { color: var(--ink); font-size: 20px; }
#leaderboard {
  position: absolute; top: 16px; right: 16px; width: 190px;
  background: rgba(14,20,34,.7); padding: 10px 12px; border-radius: 10px; font-size: 13px;
}
#leaderboard h4 { font-size: 11px; color: var(--muted); letter-spacing: 1px; margin-bottom: 6px; }
#leaderboard .row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
#leaderboard .row.me { color: #fff; font-weight: 700; }
#leaderboard .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
#leaderboard .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* 충전 상태 큰 배너 (하단 중앙) — 내 무속성/충전 상태를 절대 헷갈리지 않게 */
#charge {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  padding: 9px 20px; border-radius: 999px; font-size: 16px; white-space: nowrap;
  border: 2px solid; pointer-events: none;
}
#charge b { font-weight: 800; }
#charge.armed {
  color: #fff; border-color: var(--c);
  background: color-mix(in srgb, var(--c) 30%, rgba(14,20,34,.85));
  box-shadow: 0 0 16px color-mix(in srgb, var(--c) 60%, transparent);
}
#charge.neutral {
  color: #ffd0c8; border-color: #ff5a3c; background: rgba(60,20,16,.8);
  animation: chpulse 0.9s ease-in-out infinite;
}
#charge.inv {
  color: #cdebff; border-color: #7fe0ff; background: rgba(18,40,58,.85);
  box-shadow: 0 0 16px rgba(127,224,255,.5);
}
#charge .armt { font-variant-numeric: tabular-nums; }
#charge.armed.low { border-color: #ffb14a; animation: chwarn 0.55s ease-in-out infinite; }
#charge.armed.low .armt { color: #ffd24a; }
@keyframes chpulse { 0%,100% { box-shadow: 0 0 0 rgba(255,90,60,0); } 50% { box-shadow: 0 0 18px rgba(255,90,60,.7); } }
@keyframes chwarn { 0%,100% { box-shadow: 0 0 4px rgba(255,177,74,.3); } 50% { box-shadow: 0 0 20px rgba(255,177,74,.85); } }
@media (max-width: 560px) { #charge { font-size: 13px; padding: 7px 14px; bottom: 110px; } }

#elem-status {
  position: absolute; bottom: 18px; left: 18px;
  background: rgba(14,20,34,.7); padding: 8px 12px; border-radius: 10px;
  font-size: 13px; display: flex; align-items: center; gap: 10px;
}
#elem-status .swap-bar { width: 90px; height: 6px; border-radius: 3px; background: #2a3550; overflow: hidden; }
#elem-status .swap-bar > i { display: block; height: 100%; background: var(--water); width: 100%; }

/* HUD 칩 공통 폴리시 — 밝고 복잡한 캔버스 위 가독성(헤어라인 보더 + 블러 + 글자 다크 헤일로) */
#score, #leaderboard, #elem-status, #round, #matchup { border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px) saturate(1.05); }
#score, #leaderboard, #elem-status { border-radius: 12px; background: rgba(14,20,34,.6); }
#score, #round, #matchup, #leaderboard, #charge { text-shadow: 0 1px 2px rgba(0,0,0,.85); }
#leaderboard { pointer-events: auto; } /* #hud가 none — 행 클릭(신고/차단)이 실제로 동작하도록 복구 */
#leaderboard .row { min-height: 24px; align-items: center; }
#leaderboard .row[role="button"] { cursor: pointer; }
#leaderboard .row[role="button"]:focus-visible { outline: 2px solid #7fe0ff; outline-offset: 1px; border-radius: 6px; } /* div[role=button]은 전역 button 규칙 밖 → 별도 포커스 링 */

#result { font-size: 15px; line-height: 1.9; margin: 14px 0 4px; color: var(--muted); }
#result b { color: var(--ink); font-size: 18px; }

/* 사망 화면 */
#dead-stat { font-size: 15px; line-height: 1.9; margin: 12px 0 4px; color: var(--muted); }
#dead-stat b { color: var(--ink); font-size: 19px; }

/* 메뉴 계정 전적 — 칩 */
.acct {
  display: inline-block; color: var(--muted-2); font-size: 13px; line-height: 1.5;
  margin: 4px auto 16px; padding: 8px 16px; max-width: 100%;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 999px;
}
.acct b { color: var(--ink); font-weight: 800; }
.acct:empty { display: none; }

/* 카운트다운 속성 선택 (충전 페이즈) — 화면 중앙, 게임 조작은 통과 */
#pick {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; z-index: 6;
}
#pick .cd {
  width: 84px; height: 84px; margin: 0 auto 6px; border-radius: 50%;
  background: rgba(14,20,34,.72); border: 3px solid #ffd54a;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 800; color: #ffd54a;
}
#pick .pick-title { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
#pick .pick-row { display: flex; gap: 10px; justify-content: center; pointer-events: auto; }
#pick .pick-el {
  width: 60px; height: 60px; border-radius: 14px; font-size: 26px; cursor: pointer;
  background: rgba(20,28,46,.85); border: 2px solid rgba(255,255,255,.12); color: #fff;
  transition: transform .08s, border-color .12s;
}
#pick .pick-el:hover { transform: translateY(-2px); }
#pick .pick-el.on { border-color: #ffd54a; box-shadow: 0 0 12px rgba(255,213,74,.5); transform: translateY(-2px); }
#pick .pick-hint { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
#pick .pick-random {
  display: flex; justify-content: center; gap: 8px;
  padding: 8px 12px; border-radius: 18px;
  background: rgba(20,28,46,.82); border: 1px solid rgba(255,255,255,.12);
}
#pick .pick-random span { font-size: 28px; animation: random-bob .9s ease-in-out infinite alternate; }
#pick .pick-random span:nth-child(2) { animation-delay: -.3s; }
#pick .pick-random span:nth-child(3) { animation-delay: -.6s; }
@keyframes random-bob { to { transform: translateY(-5px) scale(1.08); filter: brightness(1.15); } }

/* 라운드 결과 */
.re-panel h2 { margin-bottom: 2px; }
#re-round { color: var(--muted); font-weight: 700; font-size: 15px; }

/* 히어로 카드: 내 순위/획득점/승리 */
.re-hero {
  display: flex; align-items: center; gap: 14px; text-align: left;
  margin: 16px auto 14px; padding: 14px 18px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
}
.re-hero .re-medal { font-size: 40px; line-height: 1; min-width: 46px; text-align: center; }
.re-hero .re-place { font-size: 24px; font-weight: 800; color: var(--ink); }
.re-hero .re-gain { color: var(--muted); font-size: 14px; margin-top: 2px; }
.re-hero .re-combat { color: #ffe18a; font-size: 11px; margin-top: 5px; }
.re-hero .re-gain b { color: var(--ink); font-size: 17px; }
.re-hero .re-win {
  display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
  background: var(--grass); color: #0c1320; font-size: 11px; font-weight: 800; letter-spacing: .8px; vertical-align: middle;
}
.re-hero.win { border-color: var(--grass); background: linear-gradient(180deg, rgba(70,214,90,.18), rgba(70,214,90,.03)); box-shadow: 0 0 30px rgba(70,214,90,.22); }
.re-hero.top { border-color: rgba(255,206,84,.42); }

/* 순위표 */
.re-rank-head, #re-rank { max-width: 330px; margin: 0 auto; }
.re-rank-head {
  display: grid; grid-template-columns: 26px 1fr 48px 36px; gap: 8px;
  padding: 0 10px 5px; font-size: 11px; color: var(--muted); letter-spacing: .5px;
}
.re-rank-head span:nth-child(1) { text-align: center; }
.re-rank-head span:nth-child(3) { text-align: right; }
.re-rank-head span:nth-child(4) { text-align: right; }
#re-rank { text-align: left; }
#re-rank .rerow {
  position: relative; display: grid; grid-template-columns: 26px 1fr 48px 36px; gap: 8px;
  align-items: center; padding: 5px 10px; border-radius: 8px; color: var(--muted); font-size: 13.5px;
  overflow: hidden;
}
#re-rank .rerow + .rerow { margin-top: 2px; }
#re-rank .rerow::before { /* 길이 비례 막대(행 배경) */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%);
  background: linear-gradient(90deg, rgba(58,160,255,.16), rgba(70,214,90,.05)); z-index: 0;
}
#re-rank .rerow > * { position: relative; z-index: 1; }
#re-rank .rerow.me { color: #fff; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(58,160,255,.5); }
#re-rank .rerow.me::before { background: linear-gradient(90deg, rgba(58,160,255,.34), rgba(70,214,90,.08)); }
#re-rank .rk { text-align: center; font-weight: 700; }
#re-rank .nm { display: flex; align-items: center; gap: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#re-rank .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#re-rank .ln { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
#re-rank .pt { text-align: right; color: var(--grass); font-weight: 700; }

#re-totals { margin-top: 16px; color: var(--muted); font-size: 14px; }
#re-totals b { color: var(--ink); }
.re-next { color: var(--muted); font-size: 12px; margin: 12px 0 6px; }

/* 라운드 타이머 (상단 중앙 최상단) */
#round {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(14,20,34,.72); padding: 5px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: .5px; border: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;
}
#round .cdt { color: #ffd54a; }
#round b { color: #ffd54a; }
#round.event {
  border-color: #ffd54a; color: #ffd54a;
  box-shadow: 0 0 16px rgba(255,213,74,.55);
  animation: evpulse 0.8s ease-in-out infinite;
}
@keyframes evpulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }

/* 상단 상성 바 */
#matchup {
  position: absolute; top: 48px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 5px;
  background: rgba(14,20,34,.72); padding: 7px 14px; border-radius: 999px;
  font-size: 15px; border: 1px solid rgba(255,255,255,.07); white-space: nowrap;
}
#matchup .mc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--c); opacity: .5; transition: opacity .15s, transform .15s;
}
#matchup .mc.cur { opacity: 1; transform: scale(1.18); background: color-mix(in srgb, var(--c) 24%, transparent); box-shadow: 0 0 10px var(--c); }
#matchup .arr { color: var(--muted); font-size: 10px; }
#matchup .arr.loop { opacity: .55; }
#matchup .hint { margin-left: 8px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.12); font-size: 12.5px; color: var(--muted); }
#matchup .hint b { font-size: 14px; }
@media (max-width: 560px) { #matchup .hint { display: none; } #matchup { font-size: 14px; } }

/* mute / fancy / game menu */
#mute, #fancy-btn, #game-menu-btn {
  position: absolute; top: 16px; pointer-events: auto;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 18px;
  background: rgba(14,20,34,.7); color: var(--ink); border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
#duel-status {
  position: absolute; top: 92px; left: 50%; transform: translateX(-50%);
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  color: #ffe5f3; background: rgba(72,44,96,.78); border: 1px solid rgba(255,158,210,.42);
  font-size: 12px; font-weight: 800; letter-spacing: .2px;
}
@media (max-width: 560px) { #duel-status { top: max(106px, calc(env(safe-area-inset-top) + 100px)); } }
#mute { left: 188px; }
#fancy-btn { left: 140px; opacity: .72; }
#game-menu-btn { left: 236px; font-size: 17px; }
#fancy-btn:hover { opacity: .9; }
#fancy-btn.on { opacity: 1; border-color: #ffd54a; box-shadow: 0 0 10px rgba(255,213,74,.4); }
#mute:hover, #fancy-btn:hover, #game-menu-btn:hover { background: rgba(26,34,54,.9); }
#fps {
  position: absolute; top: 22px; left: 286px; pointer-events: none;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* 서버 입장/재연결 상태 — 빈 캔버스와 브라우저 alert 대신 한 흐름 안에서 처리 */
.join-status {
  position: absolute; inset: 0; z-index: 20; pointer-events: auto;
  display: grid; place-items: center; padding: 20px;
  background: rgba(6,10,18,.68); backdrop-filter: blur(7px);
}
.join-card {
  width: min(88vw, 340px); padding: 28px 24px 22px; text-align: center;
  border: 1px solid rgba(255,255,255,.1); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), transparent 110px), var(--panel);
  box-shadow: 0 22px 60px rgba(0,0,0,.52);
}
.join-spinner {
  width: 42px; height: 42px; margin: 0 auto 16px; border-radius: 50%;
  border: 4px solid rgba(127,224,255,.16); border-top-color: #7fe0ff;
  animation: joinspin .75s linear infinite;
}
.join-spinner.failed { border: none; animation: none; }
.join-spinner.failed::before {
  content: '!'; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; color: #ffd3d8; background: rgba(255,90,106,.16);
  border: 1px solid rgba(255,120,134,.45); font-size: 22px; font-weight: 800;
}
.join-card h2 { font-size: 20px; }
.join-card p { margin-top: 8px; color: var(--muted-2); font-size: 13px; line-height: 1.5; }
.join-actions { display: flex; flex-direction: column; margin-top: 18px; }
.join-actions .play { width: 100%; flex: none; }
.join-actions .linklike { min-height: 42px; margin-top: 8px; }
@keyframes joinspin { to { transform: rotate(360deg); } }

.control-tip {
  position: absolute; top: 102px; left: 50%; transform: translateX(-50%); z-index: 7;
  max-width: calc(100vw - 32px); padding: 9px 15px; border-radius: 999px;
  color: #e8f6ff; background: rgba(14,20,34,.84); border: 1px solid rgba(127,224,255,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.28); backdrop-filter: blur(8px);
  font-size: 12.5px; font-weight: 700; white-space: nowrap; pointer-events: none;
  animation: tipin .25s ease-out;
}
@keyframes tipin { from { opacity: 0; transform: translate(-50%, -6px); } }

/* 플레이 중 메뉴 — 온라인 게임이 멈춘다는 오해를 피하도록 명확한 안내 */
.game-menu-panel { width: min(90vw, 360px); padding: 28px 24px 24px; }
.game-menu-icon {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 10px;
  border-radius: 50%; color: #dff4ff; font-size: 22px;
  background: rgba(58,160,255,.14); border: 1px solid rgba(127,224,255,.32);
}
.game-menu-panel h2 { font-size: 22px; }
.game-menu-note { margin-top: 8px; color: var(--muted-2); font-size: 13px; line-height: 1.5; }
.game-menu-panel .modes { flex-direction: column; margin-top: 20px; }
.game-menu-panel .play { width: 100%; flex: none; }
.game-menu-shortcut { margin-top: 14px; color: var(--muted); font-size: 11.5px; }

/* 모바일 터치 컨트롤 */
#touch {
  position: absolute; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
  pointer-events: none;
}
#joy, #t-boost { pointer-events: auto; -webkit-user-select: none; user-select: none; touch-action: none; }
#joy {
  position: relative; width: 124px; height: 124px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
#joy-ring {
  position: absolute; inset: 10px; border-radius: 50%;
  background: rgba(14,20,34,.42); border: 2px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 24px rgba(0,0,0,.38), 0 8px 30px rgba(0,0,0,.25);
}
#joy-knob {
  position: relative; width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(233,238,247,.92), rgba(122,202,255,.72));
  border: 2px solid rgba(255,255,255,.65);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  will-change: transform;
}
#t-boost {
  --fuel: 1turn;
  position: relative;
  width: 92px; height: 92px; border-radius: 50%; font-size: 14px; font-weight: 800;
  color: #f6fbff; border: 2px solid rgba(122,202,255,.62);
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), rgba(58,160,255,.34) 38%, rgba(20,28,46,.72));
  box-shadow: 0 10px 34px rgba(0,0,0,.32), 0 0 18px rgba(58,160,255,.22);
}
#t-boost::before {
  content: ''; position: absolute; inset: -7px; z-index: 0; border-radius: 50%;
  background: conic-gradient(from -90deg, #7fe0ff var(--fuel), rgba(255,255,255,.1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
  filter: drop-shadow(0 0 5px rgba(58,160,255,.35));
}
#t-boost span, #t-boost small { display: block; position: relative; z-index: 1; }
#t-boost small { margin-top: 2px; color: #cbeeff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
#t-boost.low::before { background: conic-gradient(from -90deg, #ff8b5d var(--fuel), rgba(255,255,255,.1) 0); }
#t-boost.low small { color: #ffbd9f; }
#t-boost.down { transform: scale(.96); background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.28), rgba(70,214,90,.42) 40%, rgba(20,28,46,.78)); border-color: rgba(70,214,90,.78); }

@media (max-width: 720px) {
  .panel { width: min(94vw, 390px); max-height: calc(100dvh - 28px); overflow: auto; border-radius: 14px; padding: 20px 18px; }
  .logo { font-size: 34px; }
  html[lang="ko"] .logo { font-size: 42px; letter-spacing: 5px; }
  .tagline { margin-bottom: 14px; }
  .label { margin-top: 14px; }
  .modes { margin-top: 16px; }
  .help { margin-top: 12px; }

  #score {
    top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
    padding: 6px 9px; border-radius: 9px; font-size: 12px;
  }
  #score b { font-size: 17px; }
  #leaderboard, #elem-status, #fps { display: none; }

  /* 상단 버튼: 최소 44px 탭 타깃 + 노치/펀치홀 safe-area 회피 */
  #mute, #fancy-btn, #game-menu-btn {
    top: max(10px, env(safe-area-inset-top)); bottom: auto;
    width: 44px; height: 44px; border-radius: 11px; font-size: 17px;
  }
  #mute { left: auto; right: max(10px, env(safe-area-inset-right)); }
  #fancy-btn { left: auto; right: calc(max(10px, env(safe-area-inset-right)) + 52px); }
  #game-menu-btn { left: auto; right: calc(max(10px, env(safe-area-inset-right)) + 104px); }

  #round {
    top: max(48px, calc(env(safe-area-inset-top) + 44px));
    max-width: calc(100vw - 28px); padding: 5px 10px;
    font-size: 12px; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis;
  }
  #matchup {
    top: max(78px, calc(env(safe-area-inset-top) + 74px));
    padding: 4px 8px; gap: 3px; font-size: 13px;
  }
  #matchup .mc { width: 23px; height: 23px; border-width: 1.5px; }
  #matchup .arr { font-size: 9px; }
  #matchup .hint { display: none; }

  .control-tip { top: max(108px, calc(env(safe-area-inset-top) + 104px)); font-size: 11.5px; padding: 8px 12px; }

  #charge {
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 144px);
    max-width: calc(100vw - 28px); padding: 7px 12px;
    font-size: 12px; border-width: 1.5px; overflow: hidden; text-overflow: ellipsis;
  }
  #charge.neutral { animation: none; }

  #pick { top: 43%; width: min(94vw, 340px); }
  #pick .cd { width: 66px; height: 66px; font-size: 32px; margin-bottom: 5px; }
  #pick .pick-title { margin-bottom: 6px; }
  #pick .pick-row { gap: 7px; }
  #pick .pick-el { width: 52px; height: 52px; border-radius: 12px; font-size: 23px; }
  #pick .pick-hint { display: none; }
}

@media (max-width: 420px) {
  .element-label { font-size: 11px; }
  #touch { padding-left: 12px; padding-right: 12px; }
  #joy { width: 106px; height: 106px; }
  #joy-ring { inset: 8px; }
  #joy-knob { width: 46px; height: 46px; }
  #t-boost { width: 80px; height: 80px; font-size: 12px; }
  #t-boost small { font-size: 10px; }
  #score { max-width: 96px; }
  #round { top: max(46px, calc(env(safe-area-inset-top) + 42px)); max-width: calc(100vw - 24px); }
  #matchup { top: max(74px, calc(env(safe-area-inset-top) + 70px)); }
  #charge { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 124px); }
  .control-tip { max-width: calc(100vw - 20px); overflow: hidden; text-overflow: ellipsis; }
}

/* ── soft game UI pass ──
   메뉴를 설정 화면보다 장난감처럼 느껴지게 만드는 공통 표면/모션 규칙 */
:root {
  --panel: #171f34;
  --ink: #f4f7ff;
  --muted: #a7b2c8;
  --muted-2: #bdc7da;
  --field: #10172a;
  --field-line: rgba(145, 175, 235, .2);
  --soft-ease: cubic-bezier(.2, .8, .2, 1);
  --bounce-ease: cubic-bezier(.2, 1.35, .45, 1);
}

body {
  font-family: ui-rounded, 'SF Pro Rounded', 'Segoe UI Variable Display', 'Segoe UI',
    system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, summary { font: inherit; }
button { touch-action: manipulation; }

.panel button,
.panel summary,
.panel input,
.panel h2,
.panel h3,
.panel .game-copy,
.panel .element-label,
.panel .acct {
  font-family: 'Jua', ui-rounded, 'Segoe UI', 'Malgun Gothic', sans-serif;
  font-weight: 400;
}

.overlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(85, 116, 190, .18), transparent 35%),
    radial-gradient(100% 90% at 50% 100%, rgba(44, 205, 174, .07), transparent 55%),
    rgba(7, 11, 22, .9);
  backdrop-filter: blur(6px) saturate(1.08);
}

.panel {
  isolation: isolate;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-color: rgba(174, 198, 255, .14);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 0%, rgba(117, 150, 255, .13), transparent 31%),
    radial-gradient(circle at 92% 16%, rgba(70, 214, 176, .08), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 150px),
    var(--panel);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .58),
    0 8px 24px rgba(9, 14, 30, .42),
    inset 0 1px 0 rgba(255,255,255,.09);
  scrollbar-width: thin;
  scrollbar-color: rgba(143, 164, 210, .38) transparent;
}

.panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -70px;
  left: 50%;
  width: 230px;
  height: 130px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(89, 165, 255, .13);
  filter: blur(35px);
  pointer-events: none;
}

.panel h2 {
  color: #f8faff;
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.logo {
  font-weight: 900;
  letter-spacing: -.02em;
  background-image: linear-gradient(105deg, #ff9dbb 5%, #7cc9ff 48%, #76e9a4 95%);
  filter: drop-shadow(0 6px 20px rgba(98, 179, 255, .26));
  animation: logo-float 4.8s ease-in-out infinite;
}
html[lang="ko"] .logo { letter-spacing: .1em; }

@keyframes logo-float {
  0%, 100% { transform: translateY(0) rotate(-.5deg); }
  50% { transform: translateY(-3px) rotate(.5deg); }
}

.lang-toggle {
  min-width: 44px;
  min-height: 30px;
  border-color: rgba(190, 211, 255, .18);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.16);
  transition: transform .22s var(--bounce-ease), background .2s ease, border-color .2s ease;
}
.lang-toggle:hover { transform: translateY(-2px) rotate(2deg); border-color: rgba(190,211,255,.35); }
.lang-toggle:active { transform: scale(.94); }

.panel input:not([type]), .panel input[type="text"], .panel input[type="email"] {
  padding: 16px 18px;
  border-color: var(--field-line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(7, 12, 26, .88), rgba(14, 22, 42, .92));
  box-shadow: inset 0 2px 8px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.035);
  transition: transform .22s var(--soft-ease), border-color .2s ease, box-shadow .2s ease;
}
.panel input:not([type]):hover, .panel input[type="text"]:hover, .panel input[type="email"]:hover {
  border-color: rgba(137, 184, 255, .38);
}
.panel input:not([type]):focus, .panel input[type="text"]:focus, .panel input[type="email"]:focus {
  transform: translateY(-1px);
  border-color: #72c7ff;
  box-shadow: 0 0 0 4px rgba(86, 178, 255, .14), inset 0 2px 8px rgba(0,0,0,.2);
}
.panel input::placeholder { color: #8491aa; }

.element-label {
  margin-top: 14px;
  color: #c6d1e6;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .01em;
}

.play::after, .navcard::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  opacity: .55;
  pointer-events: none;
}

.modes { margin-top: 20px; }
.play {
  position: relative;
  min-height: 52px;
  overflow: hidden;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 18px;
  color: #071521;
  background: linear-gradient(105deg, #54b8ff, #50e18a);
  box-shadow: 0 7px 0 rgba(25, 113, 139, .66), 0 14px 28px rgba(47, 176, 198, .2), inset 0 1px 0 rgba(255,255,255,.42);
  font-weight: 850;
  letter-spacing: -.015em;
  transition: transform .25s var(--bounce-ease), filter .2s ease, box-shadow .25s var(--soft-ease);
}
.play:hover {
  transform: translateY(-3px) scale(1.012);
  filter: saturate(1.06) brightness(1.06);
  box-shadow: 0 9px 0 rgba(25, 113, 139, .62), 0 18px 32px rgba(47, 176, 198, .25), inset 0 1px 0 rgba(255,255,255,.48);
}
.play:active {
  transform: translateY(5px) scale(.985);
  filter: saturate(1.02);
  box-shadow: 0 2px 0 rgba(25, 113, 139, .66), 0 7px 14px rgba(15, 69, 82, .22), inset 0 1px 0 rgba(255,255,255,.35);
  transition-duration: .08s;
}
.play.ghost {
  border-color: rgba(155, 180, 230, .13);
  color: #c5d1e6;
  background: linear-gradient(180deg, #273351, #1c263f);
  box-shadow: 0 5px 0 #121a2c, 0 10px 20px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06);
}
.play.ghost:hover { background: linear-gradient(180deg, #303e61, #222e4c); }
.play:disabled { transform: none; box-shadow: none; filter: grayscale(.15); }

.duel-btn {
  border-color: rgba(255,255,255,.25);
  background: linear-gradient(105deg, #ff91c9, #b599ff);
  box-shadow: 0 7px 0 rgba(120, 78, 174, .72), 0 14px 28px rgba(181,156,255,.22), inset 0 1px 0 rgba(255,255,255,.48);
}
.duel-btn:hover { box-shadow: 0 9px 0 rgba(120,78,174,.68), 0 18px 34px rgba(181,156,255,.3), inset 0 1px 0 rgba(255,255,255,.52); }
.duel-btn:active { box-shadow: 0 2px 0 rgba(120,78,174,.72), 0 7px 14px rgba(70,42,105,.22), inset 0 1px 0 rgba(255,255,255,.42); }

.menu-nav { gap: 10px; margin-top: 20px; }
.navcard {
  position: relative;
  min-height: 58px;
  overflow: hidden;
  border: 1px solid rgba(150, 179, 235, .14);
  border-radius: 18px;
  color: #eaf0fc;
  background: linear-gradient(155deg, rgba(34, 45, 74, .86), rgba(15, 23, 42, .94));
  box-shadow: 0 6px 14px rgba(5,9,20,.2), inset 0 1px 0 rgba(255,255,255,.045);
  font-size: 13px;
  font-weight: 750;
  transition: transform .25s var(--bounce-ease), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.navcard:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(128, 192, 255, .36);
  background: linear-gradient(155deg, rgba(42, 57, 93, .92), rgba(18, 28, 51, .96));
  box-shadow: 0 10px 20px rgba(4,8,18,.25), inset 0 1px 0 rgba(255,255,255,.07);
}
.navcard:active { transform: translateY(2px) scale(.98); }
.navcard.reward-nav {
  border-color: rgba(255, 212, 94, .3);
  background: linear-gradient(145deg, rgba(84, 67, 27, .5), rgba(27, 29, 47, .96));
}
.navcard.reward-nav:hover { border-color: rgba(255, 222, 117, .58); }

.help { margin-top: 18px; }
.help summary {
  min-height: 42px;
  padding: 11px 14px;
  border: 1px solid rgba(155, 180, 230, .1);
  border-radius: 15px;
  color: #b9c5da;
  background: rgba(10, 16, 30, .28);
  font-weight: 700;
  transition: color .2s ease, background .2s ease, transform .2s var(--bounce-ease);
}
.help summary:hover { color: #eef4ff; background: rgba(35, 46, 75, .48); transform: translateY(-1px); }
.help[open] summary { color: #dfeaff; background: rgba(43, 57, 91, .45); }
.help li { border-radius: 13px; }

.game-copy, .skin-lock, .skin-eq {
  border-radius: 999px;
  font-weight: 750;
}

.rank-tabs { padding: 5px; border-radius: 17px; }
.rt { min-height: 40px; border-radius: 13px; font-weight: 700; transition: transform .2s var(--bounce-ease), background .2s ease, color .2s ease, box-shadow .2s ease; }
.rt:hover { transform: translateY(-1px); }
.rt:active { transform: scale(.96); }
.rt.on { background: linear-gradient(180deg, rgba(74,171,255,.25), rgba(54,118,215,.16)); box-shadow: inset 0 0 0 1px rgba(104,191,255,.36), 0 5px 12px rgba(0,0,0,.14); }

.skin-card, .reward-item, .skin-current, .reward-wallet, .email-linked, .my-ref, .join-card {
  border-radius: 20px;
}
.skin-card { transition: transform .24s var(--bounce-ease), border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.skin-card:hover { transform: translateY(-3px) scale(1.015); }

.reward-buy button, .invite-url-row button {
  min-height: 38px;
  border-radius: 13px;
  transition: transform .2s var(--bounce-ease), filter .2s ease;
}
.reward-buy button:hover, .invite-url-row button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.reward-buy button:active, .invite-url-row button:active { transform: translateY(1px) scale(.97); }

.footer-links { line-height: 1.6; }
.footer-links a { transition: color .2s ease; }

@media (max-width: 720px) {
  .panel { border-radius: 26px; padding: 20px 18px; }
  .logo { margin-top: 2px; }
}

@media (max-width: 420px) {
  .panel { width: min(95vw, 390px); border-radius: 24px; }
  .panel input:not([type]), .panel input[type="text"], .panel input[type="email"] { font-size: 16px; }
  .play { min-height: 50px; border-radius: 17px; }
  .menu-nav { gap: 8px; }
  .navcard { border-radius: 16px; }
}

@media (max-height: 520px) and (max-width: 900px) {
  #joy { width: 94px; height: 94px; }
  #joy-knob { width: 42px; height: 42px; }
  #t-boost { width: 74px; height: 74px; }
  #round { top: max(42px, calc(env(safe-area-inset-top) + 38px)); }
  #matchup { display: none; }
  #charge { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 104px); }
  #pick { top: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── 메뉴 내비게이션 카드 (랭킹·스킨·초대·계정 저장) ── */
.menu-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.navcard {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 58px; padding: 10px 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink);
  background: var(--field); border: 1.5px solid var(--field-line); border-radius: 13px;
  transition: transform .08s, border-color .15s, background .15s;
}
.navcard:hover { transform: translateY(-1px); border-color: rgba(122,170,255,.55); background: #121a2c; }
.navcard:active { transform: translateY(0); }
.navcard.reward-nav { grid-column: 1 / -1; min-height: 48px; border-color: rgba(255,210,85,.34); background: linear-gradient(180deg, #1d2030, #151a2a); }
.navcard.reward-nav:hover { border-color: rgba(255,210,85,.72); }

/* ── 황금 먹이 이벤트 ── */
.feast-alert {
  position: absolute; top: 112px; left: 50%; transform: translateX(-50%); z-index: 7;
  padding: 8px 15px; border: 1.5px solid rgba(255,216,90,.72); border-radius: 999px;
  color: #fff3ae; background: rgba(57,43,12,.86); box-shadow: 0 0 20px rgba(255,205,65,.25);
  font-size: 13px; font-weight: 800; white-space: nowrap; pointer-events: none;
}

/* ── 꼬리별 보상/상점 ── */
.rewards-panel { width: min(440px, calc(100vw - 24px)); }
.reward-wallet {
  display: flex; align-items: center; justify-content: space-between; margin: 14px 0 10px; padding: 14px 16px;
  border: 1px solid rgba(255,211,82,.34); border-radius: 14px;
  color: var(--muted); background: linear-gradient(135deg, rgba(255,210,80,.11), rgba(122,170,255,.07));
}
.reward-wallet strong { color: #ffe176; font-size: 24px; }
.reward-ad { background: linear-gradient(180deg, #7358d9, #5740b7) !important; border-color: #917bff !important; }
/* 보라 버튼에 보라 3D 엣지(상속된 청록 립 제거) — 상태별로 눌림 깊이 유지 · 비활성엔 입체감 제거 */
.reward-ad:not(:disabled) { box-shadow: 0 7px 0 rgba(74,52,150,.72), 0 14px 28px rgba(115,88,217,.22), inset 0 1px 0 rgba(255,255,255,.4) !important; }
.reward-ad:not(:disabled):hover { box-shadow: 0 9px 0 rgba(74,52,150,.68), 0 18px 34px rgba(115,88,217,.3), inset 0 1px 0 rgba(255,255,255,.45) !important; }
.reward-ad:not(:disabled):active { box-shadow: 0 2px 0 rgba(74,52,150,.72), 0 7px 14px rgba(45,32,90,.22), inset 0 1px 0 rgba(255,255,255,.38) !important; }
.reward-ad:disabled { opacity: .48; cursor: default; transform: none; box-shadow: none !important; }
.reward-daily { display: block; margin: 7px 0 14px; color: var(--muted-2); font-size: 11px; }
.reward-shop { display: grid; gap: 8px; }
.reward-item {
  display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center;
  padding: 12px; text-align: left; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025);
}
.reward-item-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 23px; background: rgba(127,224,255,.1); }
.reward-item strong { color: var(--ink); font-size: 14px; }
.reward-item p { margin: 3px 0 0; color: var(--muted-2); font-size: 11px; line-height: 1.35; }
.core-award { border-color: rgba(104,226,139,.28); background: rgba(104,226,139,.08); }
.reward-buy { display: grid; justify-items: end; gap: 6px; color: #cbd5e8; font-size: 11px; white-space: nowrap; }
.reward-buy button { padding: 7px 9px; border: 1px solid rgba(255,211,82,.4); border-radius: 9px; color: #ffe176; background: #272318; cursor: pointer; font-weight: 800; }
.reward-buy button:disabled { opacity: .45; cursor: default; }
.reward-message { min-height: 18px; margin: 10px 0 0; color: #cfe0ff; font-size: 12px; }
.reward-use { background: linear-gradient(180deg, #347b91, #245c70) !important; border-color: #62c7e6 !important; }
#dead .modes { flex-wrap: wrap; }
#dead .modes > button { flex: 1 1 140px; }

@media (max-width: 560px) {
  .feast-alert { top: max(92px, calc(env(safe-area-inset-top) + 82px)); font-size: 12px; }
  .reward-item { grid-template-columns: 38px minmax(0,1fr); }
  .reward-buy { grid-column: 1 / -1; grid-template-columns: 1fr auto; justify-items: start; align-items: center; width: 100%; }
}

/* ── 진행 저장 유도 배너 + 이메일 연동 상태 ── */
.email-nudge {
  width: 100%; margin-top: 12px; padding: 11px 14px; cursor: pointer;
  font-size: 13px; font-weight: 700; line-height: 1.35; color: #cfe0ff; text-align: center;
  background: linear-gradient(180deg, #14223e, #101a2e);
  border: 1.5px solid rgba(122,170,255,.45); border-radius: 12px;
  transition: transform .08s, border-color .15s;
}
.email-nudge:hover { transform: translateY(-1px); border-color: rgba(122,170,255,.75); }
.email-nudge:active { transform: translateY(0); }
.email-linked {
  padding: 13px 15px; border-radius: 12px; font-size: 14px; line-height: 1.5; color: #d6f1e3;
  background: #102338; border: 1.5px solid rgba(120,205,160,.4);
}
.email-linked b { color: #fff; }

/* ── 텍스트형 링크 버튼 (보조) ── */
.linklike {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 14px; /* 손가락 탭 타깃 확보 */
  margin-top: 14px; background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px;
}
.linklike:hover { color: var(--ink); }

/* ── 랭킹 ── */
.rank-tabs {
  display: flex; gap: 4px; margin: 10px 0; padding: 4px;
  background: var(--field); border: 1px solid var(--line); border-radius: 13px;
}
.rt {
  flex: 1 1 0; min-width: 0; padding: 9px 6px; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--muted); border: none;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.rt:hover { color: var(--ink); }
.rt.on { background: rgba(58,160,255,.18); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(58,160,255,.45); }
.rank-list { margin-top: 10px; max-height: 46vh; overflow-y: auto; text-align: left; }
.rank-note { margin: -2px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.rkrow {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center;
  gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14.5px;
  background: rgba(255,255,255,.025); border: 1px solid transparent;
}
.rkrow + .rkrow { margin-top: 5px; }
.rkrow.top1 { background: linear-gradient(90deg, rgba(255,212,94,.18), rgba(255,212,94,.03)); border-color: rgba(255,212,94,.42); }
.rkrow.top2 { background: linear-gradient(90deg, rgba(205,215,230,.15), rgba(205,215,230,.02)); border-color: rgba(205,215,230,.34); }
.rkrow.top3 { background: linear-gradient(90deg, rgba(224,145,90,.15), rgba(224,145,90,.02)); border-color: rgba(224,145,90,.34); }
.rkrow.me { background: rgba(58,160,255,.2); border-color: var(--water); }
.rkrow .rk { color: var(--muted); font-weight: 800; text-align: center; font-size: 16px; }
.rkrow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rkrow .val { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.rank-empty { color: var(--muted); font-size: 13px; padding: 28px 0; text-align: center; }
.rank-me {
  margin-top: 12px; padding: 11px 14px; border-radius: 12px; font-size: 14px; text-align: center;
  background: rgba(58,160,255,.14); border: 1px solid rgba(58,160,255,.3); color: var(--ink);
}
.rank-me b { color: #cfe4ff; }
.rank-me:empty { display: none; }
.party-series { margin: 12px 0 4px; padding: 10px 12px; border-radius: 13px; text-align: left; background: rgba(181,156,255,.12); border: 1px solid rgba(255,158,210,.25); }
.party-series h3 { margin: 0 0 7px; font-size: 14px; color: #f6eaff; }
.party-series-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 4px 2px; color: var(--muted); font-size: 12px; }
.party-series-row.me { color: var(--ink); font-weight: 800; }
.party-series-note { margin: 7px 0 0; color: var(--muted); font-size: 10.5px; }

/* ── 스킨 꾸미기 ── */
.skin-panel {
  width: min(94vw, 480px); max-height: calc(100dvh - 28px); overflow-y: auto;
  overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #53617c transparent;
}
.skin-panel::-webkit-scrollbar { width: 7px; }
.skin-panel::-webkit-scrollbar-thumb { background: #53617c; border-radius: 999px; }
.skin-current {
  display: grid; grid-template-columns: minmax(150px, 1fr) auto; align-items: center; gap: 16px;
  margin-top: 4px; padding: 14px; border-radius: 15px; text-align: left;
  background: linear-gradient(135deg, rgba(58,160,255,.14), rgba(70,214,90,.07));
  border: 1px solid rgba(122,202,255,.3);
}
.skin-current-copy { min-width: 112px; }
.skin-current-copy span, .skin-current-copy small { display: block; color: var(--muted-2); font-size: 11px; line-height: 1.35; }
.skin-current-copy strong { display: block; margin: 2px 0 4px; color: var(--ink); font-size: 17px; }
.skin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.skin-card {
  appearance: none; position: relative; min-width: 0; padding: 11px; border-radius: 13px; cursor: pointer;
  background: #0e1422; color: var(--ink); border: 1.5px solid #243049; text-align: left;
  font: inherit; transition: border-color .15s, transform .08s, background .15s, box-shadow .15s;
}
.skin-card:hover { transform: translateY(-2px); border-color: rgba(122,202,255,.58); background: #121a2c; }
.skin-card.on {
  border-color: #7fe0ff; background: rgba(58,160,255,.14);
  box-shadow: 0 0 0 2px rgba(58,160,255,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.skin-card[data-skin="wave"] {
  background: linear-gradient(145deg, rgba(33,98,148,.3), rgba(14,20,34,.96) 64%);
  border-color: rgba(131,226,255,.42);
  box-shadow: inset 0 1px 0 rgba(225,251,255,.08);
}
.skin-card[data-skin="star"] {
  background: radial-gradient(circle at 75% 12%, rgba(255,212,94,.2), transparent 42%), #111522;
  border-color: rgba(255,212,94,.5);
  box-shadow: inset 0 1px 0 rgba(255,244,180,.1), 0 0 18px rgba(255,179,50,.06);
}
.skin-card[data-skin="wave"]:hover { border-color: rgba(170,240,255,.8); }
.skin-card[data-skin="star"]:hover { border-color: rgba(255,226,124,.88); }
.skin-card.locked { cursor: pointer; }
.skin-card.locked .skin-name { color: #7f8aa0; }
.skin-prev {
  display: block; width: 100%; height: 48px; margin-bottom: 9px;
  border: 0; border-radius: 14px;
  background: radial-gradient(ellipse at center, rgba(90, 145, 225, .1), transparent 72%);
}
.skin-current-prev { height: 58px; margin: 0; }
.skin-preview-note {
  margin: 8px 2px 0; color: var(--muted-2);
  font-family: 'Jua', ui-rounded, sans-serif; font-size: 11.5px; line-height: 1.4;
  text-align: center;
}
.skin-name { font-size: 13px; font-weight: 800; color: var(--ink); text-align: center; }
.skin-lock, .skin-eq {
  position: absolute; top: 7px; z-index: 2; padding: 3px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 800; line-height: 1.2; backdrop-filter: blur(5px);
}
.skin-lock { right: 7px; background: rgba(10,14,24,.78); color: #d1d8e6; }
.skin-eq { left: 7px; color: #09121d; background: #7fe0ff; }
.skin-hint { color: var(--muted); font-size: 11.5px; margin-top: 12px; line-height: 1.5; }
.skin-actions {
  position: sticky; bottom: -1px; z-index: 4; margin: 14px -4px -4px; padding: 12px 4px 4px;
  background: linear-gradient(180deg, transparent, var(--panel) 28%);
}
/* ── 얼굴 업로드 ── */
#face-block {
  margin-bottom: 18px; padding: 13px;
  border: 1px solid rgba(122, 202, 255, .16); border-radius: 17px;
  background: linear-gradient(145deg, rgba(34, 45, 74, .64), rgba(12, 19, 35, .72));
}
#face-block > .label { margin: 0 0 11px; }
.face-section {
  display: grid; grid-template-columns: 72px minmax(0, 1fr);
  align-items: center; gap: 12px;
}
.face-prev {
  width: 72px; height: 72px; border-radius: 50%;
  background: #0e1422 center/cover no-repeat; border: 2px solid #34425f;
  position: relative; box-shadow: inset 0 0 0 3px rgba(8, 17, 31, .8), 0 8px 20px rgba(0, 0, 0, .24);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.face-prev::after { content: '🙂'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 29px; opacity: .5; }
.face-prev.has::after { content: ''; }
.face-prev.has {
  border-color: #67d5f5;
  box-shadow: inset 0 0 0 3px rgba(8, 17, 31, .75), 0 0 0 3px rgba(103, 213, 245, .12), 0 8px 20px rgba(0, 0, 0, .26);
}
.face-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; min-width: 0; }
.face-actions .play {
  width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 9px 7px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 12.5px; line-height: 1.15; white-space: nowrap;
}
.face-actions .face-remove {
  min-height: 44px; padding-block: 9px;
  color: #ffb3b3; border-color: rgba(255, 107, 107, .30);
  background: rgba(125, 36, 49, .14);
}
.face-actions .face-remove:hover { background: rgba(160, 46, 60, .22); border-color: rgba(255, 125, 125, .48); }
.face-actions .face-remove.confirming {
  color: #fff; border-color: rgba(255, 125, 125, .72);
  background: rgba(184, 49, 67, .48);
}
.face-actions .face-remove[hidden] { display: none; }
#face-block.busy .face-prev { opacity: .62; }
#face-block.busy .face-upload::after {
  content: ''; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: face-spin .7s linear infinite;
}
@keyframes face-spin { to { transform: rotate(360deg); } }
.face-actions .play:disabled { cursor: wait; opacity: .62; transform: none; }
.face-status {
  font-size: 12px; color: var(--muted); margin: 9px 2px 0 84px;
  min-height: 16px; line-height: 1.35;
}
@media (max-width: 380px) {
  .face-section { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
  .face-prev { width: 64px; height: 64px; }
  .face-status { margin-left: 74px; }
}
.hide-faces {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 11px 13px;
  border: 1px solid rgba(145, 175, 235, .16); border-radius: 15px;
  background: rgba(12, 19, 35, .58);
  color: #dce5f6;
  font-family: 'Jua', ui-rounded, 'Segoe UI', 'Malgun Gothic', sans-serif;
  font-size: 15px; font-weight: 400; line-height: 1.35; letter-spacing: .01em;
  cursor: pointer;
}
.hide-faces:hover { border-color: rgba(122, 202, 255, .34); background: rgba(19, 29, 50, .72); }
.hide-faces input {
  width: 19px; height: 19px; flex: none;
  accent-color: #67d5f5;
}
.hide-faces span { padding-top: 1px; }

/* ── 토스트 ── */
.toast {
  position: fixed; left: 50%; bottom: 38px; transform: translateX(-50%);
  background: rgba(14,20,34,.95); color: var(--ink); padding: 11px 18px; border-radius: 11px;
  font-size: 13.5px; border: 1px solid #2a3650; z-index: 50; max-width: 86vw; text-align: center;
  transition: opacity .25s; box-shadow: 0 8px 26px rgba(0,0,0,.4);
}
.toast.hidden { opacity: 0; pointer-events: none; }
/* 터치 컨트롤이 떠 있는 동안엔 토스트를 조이스틱/부스트 밴드 위로 올림 */
body:has(#touch:not(.hidden)) .toast { bottom: calc(env(safe-area-inset-bottom) + 156px); }

.footer-links { margin-top: 16px; font-size: 12px; color: var(--muted); }
.footer-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.footer-links a:hover { color: var(--ink); }

/* ── 친구 초대 ── */
.my-ref {
  font-size: 32px; font-weight: 800; letter-spacing: 7px; text-align: center;
  text-indent: 7px; /* letter-spacing 끝 여백 보정 → 광학적 중앙 정렬 */
  padding: 18px 12px; margin-top: 8px; border-radius: 14px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, rgba(58,160,255,.1), rgba(70,214,90,.05));
  border: 1.5px dashed rgba(122,170,255,.5);
}
.ref-input { display: flex; gap: 8px; margin-top: 8px; }
.ref-input input { flex: 1; width: auto; text-transform: uppercase; letter-spacing: 2px; margin: 0; }
.ref-input .play { flex: 0 0 auto; padding: 0 20px; }

/* ── 가독성 폴리시 (메뉴·랭킹·초대·스킨 공통) ── */
.help { color: var(--muted-2); }
.help summary {
  list-style: none; padding: 9px 0; border-top: 1px solid var(--line);
  font-weight: 600; color: var(--muted-2);
}
.help summary::-webkit-details-marker { display: none; }
.help summary::after { content: ' ▾'; opacity: .6; }
.help[open] summary::after { content: ' ▴'; }
.skin-hint, .face-status, .hide-faces { color: var(--muted-2); }
.footer-links a { color: var(--muted-2); }

/* 모바일: 내비 카드·세그먼트 탭 가독성 유지 */
@media (max-width: 420px) {
  .menu-nav { gap: 6px; }
  .navcard { min-height: 54px; font-size: 12px; padding: 8px 4px; border-radius: 11px; }
  .rt { font-size: 11.5px; padding: 9px 4px; }
  .my-ref { font-size: 28px; letter-spacing: 5px; text-indent: 5px; }
  .skin-current { grid-template-columns: 1fr; gap: 9px; }
  .skin-current-copy { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; }
  .skin-current-copy small { grid-column: 1 / -1; }
  .skin-grid { gap: 8px; }
  .skin-card { padding: 9px; }
  .skin-prev { height: 43px; }
}

/* 메뉴 아래쪽에 선언된 컴포넌트도 같은 말랑한 게임 UI 톤으로 마무리 */
.navcard {
  position: relative;
  overflow: hidden;
  border-color: rgba(150, 179, 235, .14);
  border-radius: 18px;
  color: #eaf0fc;
  background: linear-gradient(155deg, rgba(34, 45, 74, .86), rgba(15, 23, 42, .94));
  box-shadow: 0 6px 14px rgba(5,9,20,.2), inset 0 1px 0 rgba(255,255,255,.045);
  font-weight: 750;
  transition: transform .25s var(--bounce-ease), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.navcard:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(128, 192, 255, .36);
  background: linear-gradient(155deg, rgba(42, 57, 93, .92), rgba(18, 28, 51, .96));
  box-shadow: 0 10px 20px rgba(4,8,18,.25), inset 0 1px 0 rgba(255,255,255,.07);
}
.navcard:active { transform: translateY(2px) scale(.98); }
.navcard.reward-nav {
  border-color: rgba(255, 212, 94, .3);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(84, 67, 27, .5), rgba(27, 29, 47, .96));
}

.help summary {
  min-height: 42px;
  padding: 11px 14px;
  border: 1px solid rgba(155, 180, 230, .1);
  border-radius: 15px;
  color: #b9c5da;
  background: rgba(10, 16, 30, .28);
  font-weight: 700;
  transition: color .2s ease, background .2s ease, transform .2s var(--bounce-ease);
}
.help summary:hover { color: #eef4ff; background: rgba(35, 46, 75, .48); transform: translateY(-1px); }
.help[open] summary { color: #dfeaff; background: rgba(43, 57, 91, .45); }
.help li { border-radius: 13px; }

.rank-tabs { border-radius: 17px; }
.rt { border-radius: 13px; font-weight: 700; transition: transform .2s var(--bounce-ease), background .2s ease, color .2s ease, box-shadow .2s ease; }
.rt:hover { transform: translateY(-1px); }
.rt:active { transform: scale(.96); }
.rt.on { background: linear-gradient(180deg, rgba(74,171,255,.25), rgba(54,118,215,.16)); box-shadow: inset 0 0 0 1px rgba(104,191,255,.36), 0 5px 12px rgba(0,0,0,.14); }

.skin-card, .reward-item, .skin-current, .reward-wallet, .email-linked, .my-ref, .join-card { border-radius: 20px; }
.skin-card { transition: transform .24s var(--bounce-ease), border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.skin-card:hover { transform: translateY(-3px) scale(1.015); }
.toast { border-radius: 16px; }

/* 메인 메뉴는 작은 노트북/가로형 모바일에서도 한 화면에 자연스럽게 들어오게 압축 */
#menu .panel { padding: 20px 26px 14px; }
#menu .acct { margin-bottom: 10px; padding-block: 6px; }
#menu .panel input:not([type]) { padding-block: 14px; }
#menu .modes { margin-top: 16px; }
#menu .menu-nav { margin-top: 15px; }
#menu .help { margin-top: 12px; }
#menu .help summary { min-height: 38px; padding-block: 8px; }
#menu .footer-links { margin-top: 10px; }

@media (max-width: 420px) {
  .navcard { border-radius: 16px; }
  #menu .panel { padding-inline: 18px; }
}

/* ── 메인 메뉴 정보 다이어트 ──
   첫 화면은 대전 흐름만 강조하고, 관리성 기능은 한 단계 아래로 묶는다. */

/* 네이티브 광고 카드는 Android 뷰로 하단 중앙에 그린다. */
body.native-ad-visible #menu { bottom: calc(112px + env(safe-area-inset-bottom)); }
body.native-ad-visible #menu .panel {
  max-height: calc(100dvh - 128px - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

#menu .duel-btn {
  min-height: 44px;
  margin-top: 8px;
  padding-block: 10px;
  border-color: rgba(208, 179, 255, .2);
  color: #e8def9;
  background: rgba(111, 76, 156, .14);
  box-shadow: inset 0 0 0 1px rgba(181, 156, 255, .07);
  font-size: 14px;
}
#menu .duel-btn:hover {
  transform: translateY(-1px);
  background: rgba(131, 88, 184, .22);
  box-shadow: inset 0 0 0 1px rgba(209, 183, 255, .14);
}
#menu .duel-btn:active { transform: scale(.985); box-shadow: none; }

#menu .menu-nav-primary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 13px;
}
#menu .menu-nav-primary .navcard,
#menu .menu-nav-primary .reward-nav {
  grid-column: auto;
  min-height: 44px;
  padding: 7px 4px;
  border-radius: 14px;
  font-size: 12px;
  background: rgba(18, 27, 48, .6);
  box-shadow: none;
}
#menu .menu-nav-primary .navcard::after { display: none; }

.menu-more {
  margin-top: 8px;
  color: var(--muted-2);
  text-align: left;
}
.menu-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  list-style: none;
  border-radius: 12px;
  color: #98a6bf;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  transition: color .2s ease, background .2s ease;
}
.menu-more > summary::-webkit-details-marker { display: none; }
.menu-more > summary:hover { color: #dbe5f7; background: rgba(255,255,255,.04); }
.menu-more[open] > summary { color: #cbd7ec; background: rgba(9, 15, 29, .32); }
.menu-more-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding-top: 7px;
}
.menu-more-actions .navcard {
  min-height: 42px;
  border-radius: 13px;
  box-shadow: none;
  font-size: 12px;
}
.menu-more .footer-links { margin: 8px 0 2px; text-align: center; }

/* ── 리워드 설명(정적 i18n) ── */
.reward-explain {
  margin: 0 0 12px; text-align: center;
  color: var(--muted-2); font-size: 12px; line-height: 1.5;
}

/* 보상 준비되면 메뉴 '보상' 카드에 알림 점 표시
   — #menu .menu-nav-primary .navcard::after { display:none }(shine 제거 규칙)보다 높은 특이성으로 완전 오버라이드 */
.navcard.reward-nav { position: relative; }
#menu .menu-nav-primary .navcard.reward-nav.has-reward::after,
.navcard.reward-nav.has-reward::after {
  content: ''; display: block; position: absolute; top: 8px; right: 10px; left: auto;
  width: 8px; height: 8px; border-radius: 50%; opacity: 1;
  background: #ffd45e; box-shadow: 0 0 8px rgba(255,212,94,.85);
  animation: rewardDot 1.6s ease-in-out infinite;
}
@keyframes rewardDot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }

/* 1:1 대기 중 초대 버튼 리마인드 펄스(20초 이상 혼자일 때 1회) */
#t-invite.pulse { animation: invitePulse 1s ease-in-out 4; }
@keyframes invitePulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 rgba(124,199,255,0); }
  50% { transform: scale(1.12); box-shadow: 0 0 22px rgba(124,199,255,.85); }
}

@media (max-width: 420px) {
  #menu .menu-nav-primary { gap: 6px; }
  #menu .menu-nav-primary .navcard { min-height: 42px; font-size: 11.5px; }
}


/* ═══════════════ v0.4 — 크루 · 친구 허브 · 미션 · 이모트 ═══════════════ */

/* 메인 메뉴: 초대 링크 배너 / 최근 크루 재입장 카드 */
.crew-quick { margin-top: 8px; }
.crew-banner {
  padding: 10px 12px 6px; font-size: 13.5px; color: #dfe8ff; text-align: center;
  border: 1px dashed rgba(124, 199, 255, .45); border-radius: 16px 16px 0 0;
  background: rgba(124, 199, 255, .08); border-bottom: 0;
}
.crew-actions {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px;
  border: 1px dashed rgba(124, 199, 255, .45); border-top: 0; border-radius: 0 0 16px 16px;
  background: rgba(124, 199, 255, .08);
}
.crew-actions .play { min-height: 44px; }
.crew-quick-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 46px; padding: 10px 14px; cursor: pointer;
  border: 1.5px solid rgba(255, 212, 94, .4); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 212, 94, .14), rgba(255, 212, 94, .05));
  color: #ffe9b0; font-size: 13px; font-weight: 750; text-align: left;
  transition: transform .2s var(--bounce-ease, ease), border-color .2s ease;
}
.crew-quick-btn:hover { transform: translateY(-1px); border-color: rgba(255, 212, 94, .7); }
.crew-quick-btn:active { transform: translateY(1px) scale(.98); }
.crew-quick-btn b { color: #ffd45e; white-space: nowrap; }

/* 친구 허브: 탭 + 크루 카드 리스트 */
.friend-tabs { margin-bottom: 10px; }
.crew-list { margin: 6px 0 2px; display: flex; flex-direction: column; gap: 6px; }
.crew-list .label { margin: 4px 2px 2px; }
.crew-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 46px; padding: 9px 13px; cursor: pointer;
  border: 1px solid rgba(151, 178, 232, .22); border-radius: 15px;
  background: linear-gradient(180deg, rgba(30, 41, 69, .55), rgba(13, 20, 37, .7));
  color: var(--ink); font-size: 12.5px; text-align: left;
  transition: transform .2s var(--bounce-ease, ease), border-color .2s ease;
}
.crew-card:hover { transform: translateY(-1px); border-color: rgba(160, 198, 255, .45); }
.crew-card:active { transform: translateY(1px) scale(.98); }
.crew-card .crew-info b { color: #ffd45e; }
.crew-card > b { color: #7fd4a0; white-space: nowrap; font-size: 12px; }

/* 데일리 미션(보상 패널) */
.daily-missions { margin: 10px 0 4px; text-align: left; }
.daily-missions h3 { margin: 0 0 6px; font-size: 14px; color: #ffe9b0; }
.mission-row {
  display: grid; grid-template-columns: minmax(86px, auto) 1fr auto auto; gap: 8px; align-items: center;
  padding: 5px 2px; font-size: 12px; color: var(--muted);
}
.mission-row .m-label { white-space: nowrap; }
.mission-row .m-bar {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .06);
}
.mission-row .m-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5ad1c4, #7fd4a0); transition: width .4s ease; }
.mission-row b { min-width: 34px; text-align: right; font-size: 11.5px; color: var(--ink); }
.mission-row em { font-style: normal; font-size: 11px; color: #ffd45e; }
.mission-row.done { color: #9fe8b8; }
.mission-row.done .m-bar i { background: linear-gradient(90deg, #ffd45e, #ffb14a); }

/* 파티 이모트(친구방 전용): 좌측 중앙 세로 스택 */
#emotes {
  position: absolute; z-index: 6; pointer-events: auto;
  left: max(12px, env(safe-area-inset-left));
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px;
}
#emotes button {
  width: 46px; height: 46px; border-radius: 50%; font-size: 22px; cursor: pointer;
  background: rgba(14, 20, 36, .5); border: 1.5px solid rgba(255, 255, 255, .22); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .16s var(--bounce-ease, ease), border-color .16s ease;
}
#emotes button:hover { border-color: rgba(255, 255, 255, .5); }
#emotes button:active { transform: scale(.86); }
@media (max-width: 560px) {
  #emotes { gap: 6px; }
  #emotes button { width: 40px; height: 40px; font-size: 19px; }
}

/* 스킨: 꼬리별 구매 가격 배지 */
.skin-price {
  position: absolute; right: 7px; top: 7px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 212, 94, .18); border: 1px solid rgba(255, 212, 94, .5);
  color: #ffd45e; font-size: 11px; font-weight: 800;
}

/* 결과 화면: MVP 표창 + 리그 순위 변동 화살표 */
.re-mvp {
  margin: 6px 0 2px; padding: 7px 10px; border-radius: 12px; font-size: 12.5px; color: #ffe9b0;
  background: rgba(255, 212, 94, .1); border: 1px solid rgba(255, 212, 94, .3);
}
.re-mvp b { color: #ffd45e; }
.party-series-row em { font-style: normal; font-size: 10px; margin-left: 2px; }
.party-series-row em.up { color: #7fd4a0; }
.party-series-row em.down { color: #ff7a8a; }
.party-series-row em.same { color: var(--muted); opacity: .6; }

/* 게임 메뉴(⏸) 빠른 설정 */
.gm-settings { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.gm-settings button {
  min-width: 52px; height: 44px; padding: 0 12px; border-radius: 14px; font-size: 18px; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
.gm-settings button:hover { border-color: rgba(255, 255, 255, .35); }
.gm-settings #gm-lang { font-size: 13px; font-weight: 800; }
.gm-settings #gm-fancy { opacity: .45; }
.gm-settings #gm-fancy.on { opacity: 1; }

/* ═══════════════ v0.5 — 방장/방 설정 · 팀전 ═══════════════ */

/* 팀 바(줄다리기 게이지) — 라운드 타이머 아래 중앙 */
#team-bar {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; width: min(60vw, 340px); height: 22px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(10, 14, 24, .55); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#team-bar i { display: block; height: 8px; border-radius: 999px; flex-grow: 50; flex-basis: 0; transition: flex-grow .5s ease; }
#team-bar .t0 { background: linear-gradient(90deg, #5ad1ff, #8fe3ff); }
#team-bar .t1 { background: linear-gradient(90deg, #d9a8ff, #c77dff); }
#team-bar #team-score { flex: none; font-size: 12px; font-weight: 800; color: #eef3ff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
@media (max-width: 560px) { #team-bar { top: 40px; width: 72vw; } }

/* 게임 메뉴 ⚙️ 방 설정 섹션 */
.room-settings { margin-top: 12px; padding: 10px 12px; border-radius: 14px; text-align: left; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); }
.room-settings h3 { margin: 0 0 4px; font-size: 14px; color: #dfe8ff; }
.room-settings .rs-host { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.room-settings .rs-host em { font-style: normal; color: #ffd45e; }
.rs-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.rs-row > span { min-width: 34px; font-size: 12px; color: var(--muted); }
.rs-tabs { flex: 1; margin: 0; padding: 3px; }
.rs-tabs .rt { min-height: 34px; font-size: 12.5px; }
.rs-tabs .rt:disabled { opacity: .55; cursor: default; }
.rs-roster-label { margin: 8px 0 4px; font-size: 11px; color: var(--muted); }
.rs-roster { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-member {
  padding: 6px 10px; border-radius: 999px; font-size: 12px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: var(--ink);
}
.rs-member[data-team="0"] { border-color: rgba(90, 209, 255, .55); }
.rs-member[data-team="1"] { border-color: rgba(199, 125, 255, .55); }
.rs-member:disabled { cursor: default; opacity: .8; }
.room-settings .linklike { margin-top: 8px; }

/* 결과 화면 팀 밴드 */
.re-team {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 4px 0 8px; padding: 9px 13px; border-radius: 13px;
  border: 1.5px solid var(--tc, #5ad1ff); background: rgba(255,255,255,.05);
  font-size: 14px;
}
.re-team b { color: var(--tc, #5ad1ff); }
.re-team span { font-size: 13px; color: var(--ink); font-weight: 800; }

/* ═══════════════ v0.5 — 관전 모드 ═══════════════ */

/* 관전 중: 플레이어 전용 위젯 전부 숨김(값 갱신은 무해) */
#hud.spec #score, #hud.spec #charge, #hud.spec #elem-status, #hud.spec #boost-fuel,
#hud.spec #matchup, #hud.spec #pick, #hud.spec #t-item, #hud.spec #touch { display: none !important; }

.spec-status {
  position: absolute; z-index: 7; pointer-events: auto;
  left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 14px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px;
  border-radius: 999px; background: rgba(10, 14, 24, .72); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #eef3ff; font-size: 13px; font-weight: 750; white-space: nowrap;
}
.spec-status .spec-target { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.spec-status .play { flex: none; min-height: 38px; padding: 8px 16px; font-size: 13px; }
.spec-status .play:disabled { opacity: .5; }
@media (max-width: 560px) { .spec-status { max-width: 92vw; } .spec-status .spec-target { display: none; } }

/* 관전자 응원 피드(전원에게 보임) */
.spec-feed {
  position: absolute; z-index: 6; pointer-events: none;
  left: max(14px, env(safe-area-inset-left)); top: 86px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; color: #cfe0ff; text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.spec-feed div { animation: tipin .25s ease; }

/* ═══════════════ 소셜 로그인(구글 / 애플) ═══════════════ */
/* 각 브랜드 가이드라인 색 — 카카오 버튼과 같은 3D 눌림감으로 통일 */
.social-btn {
  display: block; width: 100%; min-height: 48px; margin-top: 8px; padding: 13px 16px;
  border-radius: 16px; font-size: 15px; font-weight: 800; cursor: pointer;
  font-family: inherit; letter-spacing: -.01em;
  transition: transform .18s var(--bounce-ease, ease), filter .18s ease;
}
.social-btn:active { transform: translateY(3px); }
.google-btn {
  background: #fff; color: #1f1f1f;
  border: 1px solid #dadce0; box-shadow: 0 4px 0 #c9cdd2, 0 8px 18px rgba(0,0,0,.18);
}
.google-btn:active { box-shadow: 0 1px 0 #c9cdd2, 0 4px 10px rgba(0,0,0,.16); }
.apple-btn {
  background: #000; color: #fff;
  border: 1px solid rgba(255,255,255,.22); box-shadow: 0 4px 0 #2a2a2a, 0 8px 18px rgba(0,0,0,.3);
}
.apple-btn:active { box-shadow: 0 1px 0 #2a2a2a, 0 4px 10px rgba(0,0,0,.26); }