/* ============================================================
   Section & Box System v4 — 배치 보조 (2026-08-27)
   v4 CSS 는 '모양'(테두리·라운드·깊이)만 정한다. 새로 생긴
   section-header / section-body / well 계층이 화면 안에서 제대로 늘어나도록
   여기서 배치만 맡는다. 색·테두리·그림자는 건드리지 않는다.
   ============================================================ */
@media (min-width:1024px){

  /* ---- 섹션 : 헤더 고정 + 본문이 남는 높이를 채운다 ---- */
  .ca-v3 #scr-lobby [data-ca-box="section"]{
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    min-height:0;
    padding:0;                 /* 안쪽 여백은 section-body 가 맡는다 */
  }
  .ca-v3 [data-ca-box="section-header"] strong{
    font-size:16px;font-weight:950;letter-spacing:-.02em;
  }
  .ca-v3 [data-ca-box="section-body"]{
    display:grid;
    grid-template-rows:minmax(0,1fr);
    min-height:0;
  }

  /* 매치 설정 : 옵션 묶음을 하나의 well 로 */
  .ca-v3 #settings .ca-sec-well{
    display:grid;
    align-content:start;
    gap:8px;
    padding:11px;
    min-height:0;
    overflow:auto;
  }
  .ca-v3 #settings .set-row{margin-bottom:0}
  .ca-v3 #settings .ca-panel__title{display:none}   /* 제목은 헤더로 옮겨졌다 */

  /* 채팅 : 메시지 well 이 늘어나고, 입력줄은 아래 고정 */
  .ca-v3 .ca-sec-body--chat{
    grid-template-rows:minmax(0,1fr) auto;
    gap:9px;
  }
  .ca-v3 #scr-lobby [data-ca="chat-messages"]{
    min-height:0;
    padding:10px;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  /* ---- 하단 rail : 시안처럼 나가기 · 상태 · 도감 · 시작 ---- */
  .ca-v3 [data-ca-box="footer"]{
    display:flex;align-items:center;gap:14px;
    padding:8px 14px;
    margin:0 var(--cag-gap,12px) var(--cag-gap,12px);
  }
  /* 도감 버튼은 제 크기만 차지한다.
     예전엔 flex:1 로 늘려 두어서 하단 바를 가로지르는 파란 막대처럼 보였다. */
  .ca-v3 [data-ca-box="footer"] .ca-guide-open--lobby{
    flex:0 0 auto;width:auto;margin:0;min-height:44px;
  }
  /* 남는 자리는 안내 문구가 먹고, 시작 버튼은 오른쪽 끝으로 밀린다 */
  .ca-v3 [data-ca-box="footer"] .ca-waiting-footer__hint{flex:1 1 auto}
  .ca-v3 [data-ca-box="footer"] [data-ca="start-button"]{flex:0 0 auto;margin-left:0}

  /* ---- 캐릭터 toolbar : v4 가 rail 모양을 주므로 내 테두리는 뺀다 ---- */
  .ca-v3 [data-ca-box="toolbar"]{padding:10px 16px}

  /* ---- 셸이 overflow:hidden 이라 안쪽이 넘치지 않게 ---- */
  .ca-v3 #scr-lobby [data-ca-box="shell"]{
    display:grid;
    grid-template-rows:clamp(58px,7vh,72px) minmax(0,1fr) auto;
  }
}

/* 세로 낮은 화면 : 섹션 여백을 줄여 한 화면에 담는다 */
@media (min-width:1024px) and (max-height:820px){
  .ca-v3 #settings .ca-sec-well{gap:6px;padding:9px}
  .ca-v3 [data-ca-box="footer"]{padding:6px 12px}
}

/* ============================================================
   결과 모달 — 승리/패배가 같은 구조·크기, 데이터만 바뀐다
   ============================================================ */
.ca-v3 [data-ca-box="modal"]{
  /* v4 가 테두리·배경·그림자를 정한다. 크기는 여기서 고정해
     승리와 패배가 같은 박스가 되도록 한다. */
  width:min(620px,calc(100vw - 36px));
}
.ca-v3 [data-ca-box="modal"] [data-ca="result-plate"]{
  border-radius:999px;
}
/* 패배에서도 모달 본문은 크림색을 유지한다 (전체를 회색으로 만들지 않는다) */
.ca-v3 [data-ca-box="modal"][data-result="defeat"] .result-sub{color:#7a6a63}
/* 내 순위행 표시 — 승리 화면에서도 어디가 나인지 보이게 */
.ca-v3 [data-ca-box="row"][data-current="true"]{
  outline:2px dashed rgb(21 58 103 / .28);
  outline-offset:-6px;
}
.ca-v3 [data-ca-box="modal"][data-result="defeat"] [data-ca-box="row"][data-current="true"]{
  outline-color:rgb(214 64 64 / .38);
}

/* ---- 토큰앱스 포인트 알림 띠 ---------------------------------- */
.ta-toast{
  position:fixed; left:50%; top:18px; transform:translate(-50%,-140%);
  z-index:9999; pointer-events:none;
  padding:10px 18px; border-radius:999px;
  background:rgba(18,22,38,.94); border:2px solid rgba(255,214,102,.85);
  color:#ffd666; font-weight:800; font-size:14px; letter-spacing:.02em;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  opacity:0; transition:transform .28s cubic-bezier(.2,1.4,.4,1), opacity .2s;
}
.ta-toast.show{ transform:translate(-50%,0); opacity:1; }

/* ============================================================
   결과창 하단 버튼 — 시안(result-victory / result-defeat)대로
   대기실로 · 다시하기를 나란히, 그 아래에 자동 복귀 안내.
   ============================================================ */
.result-actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px;margin-top:16px;
}
.ca-v3 [data-ca="result-actions"]{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px;margin-top:16px;
}
.result-act.ca-btn-compact{
  flex:1 1 190px;max-width:280px;min-height:56px;
  grid-template-columns:32px minmax(0,1fr);
}
.result-act.ca-btn-compact .ca-button__icon{width:30px;height:30px}
.result-act.ca-btn-compact .ca-button__title{font-size:19px}
/* 안내 문구는 버튼 아래 줄로 내린다 */
.ca-v3 [data-ca="result-actions"] .result-note{
  flex:1 0 100%;order:2;
  min-height:0;padding:0;border-radius:0;
  font-size:12px;text-align:center;opacity:.72;
}

/* ============================================================
   혼자 하기 모드(게임 서버 없음) — 함께하기 UI 감추기
   hidden 속성만으로는 .join-row 의 display:grid 를 못 이겨서
   방 코드 입력칸이 그대로 보였다. 실제로 코드를 넣어 볼 수 있었지만
   그 방은 내 브라우저 안에만 있어 언제나 나 혼자였다.
   ============================================================ */
body[data-ca-offline="true"] .join-row,
body[data-ca-offline="true"] .room-pill,
body[data-ca-offline="true"] #btnCopy{
  display:none!important;
}

/* ============================================================
   관전 UI (v5) — 탈락 토스트와 맵 상단 관전 바
   스킨 PNG 는 v5 가 background 로 넣어 준다. 여기서는 자리만 잡는다.
   둘 다 클릭을 먹지 않아 맵과 채팅을 가리지 않는다.
   ============================================================ */
.spectate-toast,
.spectate-bar{
  position:absolute;left:50%;z-index:9;
  display:grid;place-items:center;gap:2px;
  pointer-events:none;text-align:center;
  font-family:var(--ca-sans);color:#fff;
  text-shadow:0 2px 0 rgb(20 44 74 / .45);
}
.spectate-toast[hidden],
.spectate-bar[hidden]{display:none!important}

.spectate-toast{
  top:50%;transform:translate(-50%,-50%);
  width:min(320px,72%);min-height:64px;
  font:900 20px/1 var(--ca-sans);letter-spacing:.12em;
}
.spectate-bar{
  top:10px;transform:translateX(-50%);
  width:min(520px,86%);min-height:64px;
  padding:10px 22px;
}
.spectate-bar b{font:900 17px/1.2 var(--ca-sans);letter-spacing:.06em}
.spectate-bar span{font:700 12px/1.3 var(--ca-sans);opacity:.92}

/* 스킨을 안 쓰는 좁은 화면에서는 직접 그려 준다 */
@media (max-width:1023px){
  .spectate-toast,
  .spectate-bar{
    border:3px solid #153a67;border-radius:16px;
    background:linear-gradient(180deg,#5b7fae,#2b4c78);
    box-shadow:0 4px 0 rgb(20 44 74 / .35);
  }
  .spectate-bar{min-height:52px;padding:8px 16px}
  .spectate-toast{min-height:52px;font-size:17px}
}

/* 혼자 하기 모드 : 게임 화면 사이드바의 방 코드도 감춘다 */
body[data-ca-offline="true"] .ca-room-summary__code{display:none!important}