/* ============================================================
   Design System v3 양보 (2026-08-27)
   v3 는 `.ca-v3 :where(...)` 라 특정도가 (0,1,0) 으로 낮다.
   내 규칙 중 그보다 강한 것만 골라 v3 가 활성일 때 비켜서게 한다.
   (모바일 <1024px 은 ca-v3 가 붙지 않으므로 영향 없다)
   v3 의 99-compatibility 가 !important 로 덮는 항목은 여기서 다루지 않는다.
   ============================================================ */

/* 맵 선택 카드
   앞서 v3 에 자리를 내주려고 border/background/shadow 를 0 으로 지웠는데,
   내 셀렉터(0,2,1)가 v3 의 map-card(0,1,0)보다 강해 v3 스타일까지 같이 지워졌다.
   그 결과 카드를 골라도 테두리 두께가 0 이라 '아무 변화가 없어' 보였다.
   여기서 카드 모양과 선택 상태를 직접 그린다. */
.ca-v3 .ca-mapseg button{
  display:grid;justify-items:center;gap:4px;
  padding:6px 4px 5px;cursor:pointer;
  border:2px solid #dfcfb7;
  border-radius:var(--ca-v3-r-2,12px);
  background:linear-gradient(#fffef9,#f6ecdc);
  box-shadow:inset 0 2px 0 #fff,0 2px 0 rgb(126 94 52 / .10);
  transition:transform 90ms ease;
}
.ca-v3 .ca-mapseg button canvas{border-radius:var(--ca-v3-r-1,8px);background:#eef4ec}
.ca-v3 .ca-mapseg button i{
  font:800 9px/1.2 var(--kit-font,sans-serif);font-style:normal;color:#6d7d8f;
}
.ca-v3 .ca-mapseg button:hover{transform:translateY(-2px)}
.ca-v3 .ca-mapseg button:active{transform:translateY(2px)}
.ca-v3 .ca-mapseg button.on,
.ca-v3 .ca-mapseg button[aria-selected="true"]{
  border-color:var(--ca-v3-orange-600,#ef7507);
  background:linear-gradient(#fff3dc,#ffe4b4);
  box-shadow:inset 0 2px 0 #fff,0 4px 0 #d8780e;
}
.ca-v3 .ca-mapseg button.on i,
.ca-v3 .ca-mapseg button[aria-selected="true"] i{color:#8a5200;font-weight:900}
.ca-v3 .ca-mapseg button:focus-visible{outline:0;box-shadow:0 0 0 3px #fff,0 0 0 6px rgb(53 191 212 / .85)}

/* 설정 패널 안쪽 여백은 v3 가 정한다 */
.ca-v3 #scr-lobby .ca-settings{padding:var(--ca-v3-s-5,16px)}

/* 관전 카드 : 맵 중앙에 하나만 뜨고 판을 가리지 않는다 */
.ca-v3 #scr-game .stage-msg{
  position:absolute;inset:0;
  display:grid;place-items:center;
  pointer-events:none;z-index:12;
}
.ca-v3 [data-ca="spectator-card"] .spectator-tag{
  display:inline-flex;align-items:center;
  padding:4px 14px;border-radius:999px;
  border:2px solid rgb(255 255 255 / .8);
  background:linear-gradient(#ff8175,#d84643);
  color:#fff;font:900 12px/1 var(--ca-v3-font,sans-serif);letter-spacing:.1em;
  box-shadow:0 3px 0 rgb(120 30 28 / .4);
}
.ca-v3 [data-ca="spectator-card"] .spectator-title{
  display:block;margin-top:10px;
  font:950 30px/1 var(--ca-v3-font,sans-serif);color:#fff;
  text-shadow:0 2px 0 rgb(0 0 0 / .3);
}
.ca-v3 [data-ca="spectator-card"] .spectator-sub{
  display:block;margin-top:6px;
  font:700 13px/1 var(--ca-v3-font,sans-serif);color:rgb(255 255 255 / .82);
}

/* 결과 모달 : 내 .result-card 는 v3 result-modal 과 같은 특정도라 v3 가 이긴다.
   다만 폭·패딩은 내 쪽이 맞으므로 유지하고, 액션 영역만 정리한다. */
.ca-v3 [data-ca="result-actions"]{
  display:flex;justify-content:center;margin-top:14px;
}
.ca-v3 [data-ca="result-actions"] .result-note{margin:0}

/* ------------------------------------------------------------
   맵 캐비닛 정사각 보정
   v3 원본은 `width: min(100%, calc(100dvh - 112px))` 로 폭을 먼저 고정한 뒤
   `max-height: 100%` 로 높이를 자른다. 남는 세로가 부족하면 높이만 줄어
   aspect-ratio 가 깨진다 (1920×1080 에서 968×920 으로 측정됨).
   높이를 기준으로 잡고 폭을 파생시키면 어떤 비율에서도 정사각이 유지된다.
   ------------------------------------------------------------ */
.ca-v3 [data-ca="map-cabinet"]{
  width:auto;
  height:100%;
  max-width:100%;
  max-height:100%;
  aspect-ratio:1 / 1;
}
/* 보드는 15×13(600×520)이라 정사각 안에서 비율을 지켜 레터박스한다 */
.ca-v3 [data-ca="map-canvas"]{
  aspect-ratio:auto;
  object-fit:contain;
}

/* ------------------------------------------------------------
   채팅 드로어 토글
   v3 의 [data-ca-button="icon"] 이 display 를 되살려, 사이드바가 이미 붙어 있는
   넓은 화면에서도 버튼이 보였다.

   1024px 이상에서는 mobile.css 가 사이드바를 늘 보이게 하므로 버튼은 필요 없다.
   그 아래(서랍이 되는 구간)에서만 mobile.css 가 다시 켠다.
   ------------------------------------------------------------ */
@media (min-width:1024px){
  .ca-v3 #btnChatToggle{display:none!important}
}

/* ------------------------------------------------------------
   결과창은 .show 일 때만
   v3 의 [data-ca="scrim"] 이 display:grid 를 지정해, 내 `.result-overlay{display:none}`
   을 덮어 결과 모달이 게임 중에도 늘 떠 있었다 (내용 없는 빈 창).
   ------------------------------------------------------------ */
.ca-v3 [data-ca="scrim"]:not(.show){display:none!important}

/* 하단 버튼 : v3 버튼이 폭을 스스로 정하도록 내 강제 폭을 풀어준다 */
.ca-v3 .ca-btn-compact{width:auto;min-width:0}
.ca-v3 [data-ca="start-button"]{margin-left:auto}

/* ------------------------------------------------------------
   캐릭터 선택 레일
   v3 의 character-rail 이 flex 로 잡히면서 타일 칸이 36px 로 쪼그라들었는데
   안쪽 캐릭터 캔버스는 52px 이라 밖으로 삐져나왔다 (깨져 보이는 원인).
   시안처럼 라벨 → 타일 4개 → 무작위 버튼을 왼쪽에 나란히 두고
   타일 폭을 캔버스보다 크게 확보한다.
   ------------------------------------------------------------ */
.ca-v3 [data-ca="character-rail"]{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 16px;
}
.ca-v3 .ca-character-rail__label{flex:0 0 auto}
.ca-v3 .ca-character-rail__tiles{
  display:grid;
  grid-template-columns:repeat(4,minmax(84px,104px));
  gap:10px;
  flex:0 1 auto;
  min-width:0;
  height:100%;
}
.ca-v3 .ca-character-rail .char-opt{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  justify-items:center;align-content:center;
  min-width:0;width:100%;height:100%;
  padding:6px 4px;
}
.ca-v3 .ca-character-rail .char-opt canvas{
  width:auto;height:100%;
  max-width:100%;max-height:52px;
  aspect-ratio:1 / 1;
}
.ca-v3 .ca-character-rail .char-opt .tg{
  font:900 10px/1 var(--ca-mono,monospace);letter-spacing:.08em;margin-top:3px;
}
.ca-v3 .ca-rail-shuffle{flex:0 0 48px;width:48px;height:48px}

/* ------------------------------------------------------------
   HUD 가운데 : 타이머(44) + 모드 글자(11) + 간격이 HUD 안쪽 높이를 넘어
   "FREE FOR ALL" 아래쪽이 잘렸다. 타이머를 조금 낮추고 여백을 줄인다.
   ------------------------------------------------------------ */
.ca-v3 #scr-game [data-ca="hud"]{padding-block:3px}
.ca-v3 #scr-game .ca-hud__center{gap:1px;align-content:center}
.ca-v3 #scr-game [data-ca="timer"]{min-height:40px;font-size:24px;padding-block:1px;min-width:118px}
.ca-v3 #scr-game .ca-hud__mode{font-size:10px;line-height:1.1}

/* ------------------------------------------------------------
   결과 순위 : 4줄이 다 보여야 한다.
   내 `.result-list{max-height:180px}` 때문에 2줄만 보이고 안쪽 스크롤이 생겼다.
   모달이 커질 여유가 있으니 제한을 푼다 (넘칠 때만 스크롤).
   ------------------------------------------------------------ */
.ca-v3 #resultList{
  /* 4줄(64px×4 + 간격 8px×3 + 위 여백 14px = 326px)이 잘리지 않게. */
  max-height:min(360px, calc(100dvh - 360px));
  overflow-y:auto;
}

/* 세로 낮은 화면(≤820px)에서 v3 는 HUD 줄을 64px 로 줄인다.
   타이머 40 + 모드 11 = 51 이라 안쪽(52px)에 딱 붙어 글자가 테두리에 닿았다.
   줄을 조금 늘려 숨 쉴 틈을 준다 (맵은 8px 작아진다). */
@media (min-width:1024px) and (max-height:820px){
  .ca-v3[data-ca-screen="battle"] [data-ca="shell"]{grid-template-rows:74px minmax(0,1fr)}
}

/* ============================================================
   결과 모달 — 시안(result-modal-v3.png)에 맞춤
   ============================================================ */

/* 1) SETTLED 플레이트가 모달 위 모서리에 걸치는 시안 구성.
      모달이 overflow:auto 라 플레이트 윗부분이 잘려 있었다.
      순위 목록이 자체 스크롤을 가지므로 모달은 넘칠 필요가 없다. */
.ca-v3 [data-ca="result-modal"]{
  overflow:visible;
  padding-top:64px;
}
.ca-v3 [data-ca="result-plate"]{
  top:-26px;
  transform:translateX(-50%);
}

/* 2) 캐릭터를 시안만큼 크게 */
.ca-v3 #resultFace{width:168px;height:168px;flex:0 0 168px}
.ca-v3 .result-hero{gap:22px;align-items:center;margin-bottom:6px}
.ca-v3 #resultBig{font-size:48px}

/* 3) 순위 행 : 시안처럼 높고 깊이감 있게 */
.ca-v3 [data-ca="ranking-row"]{
  min-height:64px;
  border-radius:18px;
  font-size:15px;
}
.ca-v3 [data-ca="ranking-row"] .rk{font-size:16px}
.ca-v3 [data-ca="ranking-row"] .sc{font-size:12px}

/* 4) 1위는 금색 + 왕관 (왕관은 JS 가 캔버스로 넣는다) */
.ca-v3 [data-ca="ranking-row"][data-rank="1"]{
  border-color:#eaa71c;
  box-shadow:inset 0 2px 0 #fff,0 5px 0 rgb(199 142 12 / .35);
}
.ca-v3 .rank-crown{
  position:absolute;top:-15px;left:22px;
  width:30px;height:30px;display:block;pointer-events:none;
}
.ca-v3 [data-ca="ranking-row"]{position:relative;overflow:visible}
.ca-v3 #resultList{overflow-x:visible;padding-top:14px}

/* 5) 하단 : 자동 복귀 안내를 시안 버튼 높이에 맞춘다 */
.ca-v3 [data-ca="result-actions"] .result-note{
  min-height:52px;display:grid;place-items:center;
  padding-inline:26px;border-radius:999px;font-size:14px;
}

/* ============================================================
   캐릭터 선택 레일 — 시안(waiting-room-v3.png) 크기로
   ============================================================ */
.ca-v3 .ca-character-rail__tiles{
  grid-template-columns:repeat(4,minmax(96px,124px));
  gap:12px;
}
.ca-v3 .ca-character-rail .char-opt canvas{max-height:62px}
.ca-v3 .ca-character-rail .char-opt .tg{font-size:11px;margin-top:4px}
.ca-v3 .ca-character-rail__label{font-size:13px}