/* ============================================================
   CRYPTO ARCADE — v7 버튼 브리지 (buttons-v7.css 다음에 로드)

   왜 필요한가

   1) 그동안 그림이 없던 버튼들은 내가 CSS 로 흉내 내 두었다.
      그 규칙들이 v7 보다 무거워서(내 것은 4~5단 선택자 + !important,
      v7 은 [data-ca-button="…"] 한 단) 새 그림을 덮어 버린다.
      여기서 그 칠을 걷어내 v7 그림이 보이게 한다.

   2) 탈출 버튼은 안에 글자·부제·진행바 세 개가 들어간다.
      v7 의 `[data-ca-button="escape"] > span` 은 하나만 있다고 보고
      셋을 같은 자리에 겹쳐 놓는다. 세로로 다시 세운다.
   ============================================================ */

/* ---- 공통 : v7 버튼에는 내 칠을 얹지 않는다 ---- */
.ca-button-v7,
body.touchmode .ca-button-v7,
body.touchmode #scr-game .ca-button-v7,
body.touchmode #scr-game .ca-game-sidebar .ca-button-v7,
#scr-lobby [data-ca-box="footer"] .ca-button-v7{
  /* 그림은 v7 이 넣는다. 여기서는 예전 칠만 걷어낸다. */
  border:0;
  background-color:transparent!important;
  box-shadow:none!important;
}

/* ---- 알약 버튼 (아이템 · 나가기 · 대기실로 · 다시하기) ---- */
.ca-button-v7[data-ca-button^="pill-"]{
  min-width:110px;height:58px;padding:0 24px;
  font:950 15px/1 var(--ca-sans);
  display:inline-grid;place-items:center;
  white-space:nowrap;
}
.ca-button-v7[data-ca-button="pill-primary"],
.ca-button-v7[data-ca-button="pill-secondary-blue"]{color:#fff}
.ca-button-v7[data-ca-button="pill-neutral"]{color:#153a67}
/* 화면에는 안 보이지만 읽어 주는 글자는 남긴다 */
.ca-button-v7 .sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---- 봉인 탈출 ----
   그림 가운데에 번개가 그려져 있어 글자를 가운데 두면 겹쳐 안 보인다.
   키트 의도대로 아래쪽에 글자와 진행바만 얹는다. */
/* 기본은 숨김. 봉인당했을 때만 JS 가 .show 를 붙인다.
   v7 이 .ca-button-v7 에 display 를 주므로 hidden 만으로는 안 숨겨졌다. */
.ca-button-v7[data-ca-button="escape"]{
  display:none!important;position:relative;
  padding:0;border-radius:50%;
}
body.touchmode #scr-game .touch .mash-escape.ca-button-v7.show{display:block!important}
/* hidden 속성은 언제나 이긴다 */
.ca-button-v7[hidden]{display:none!important}
.ca-button-v7[data-ca-button="escape"] > span{
  position:absolute!important;left:0;right:0;
  text-align:center;z-index:1;
}
.ca-button-v7[data-ca-button="escape"] .mash-escape__big{
  inset:auto 0 30%!important;
  font:950 clamp(17px,4.4vh,24px)/1 var(--ca-sans);
  color:#fff;text-shadow:0 2px 0 rgb(142 38 48 / .9),0 0 6px rgb(0 0 0 / .3);
}
/* 부제는 자리가 없다. 그림과 맥박이 대신 알려 준다. */
.ca-button-v7[data-ca-button="escape"] .mash-escape__sub{display:none!important}
.ca-button-v7[data-ca-button="escape"] .mash-escape__bar{
  inset:auto 0 17%!important;
  width:46%;height:7px;margin:0 auto;
  border-radius:999px;background:rgb(90 20 26 / .42);overflow:hidden;
}
.ca-button-v7[data-ca-button="escape"] .mash-escape__bar i{
  display:block;height:100%;width:0%;
  border-radius:999px;background:#fff;transition:width .09s linear;
}
.ca-button-v7[data-ca-button="escape"]:active{animation:none!important}

/* 좌석 카드의 캐릭터 바꾸기 버튼이 READY 배지와 겹치지 않게 */
.seat .ca-card-swap.ca-button-v7{
  position:absolute;right:10px;bottom:10px;
  width:40px;height:40px;
}
/* 알약은 키트 방식(배경 늘리기)을 그대로 쓴다.
   테두리 이미지로 나누면 가운데 띠와 양 끝의 명암이 어긋나 이음매가 보였다.
   대신 폭을 원본 비율(420x116)에 가깝게 잡아 끝이 눌리지 않게 한다. */
.ca-button-v7[data-ca-button^="pill-"]{
  border-image:none!important;
  min-width:150px;height:58px;padding:0 22px;
}

/* 아주 좁은 칸에서는 모서리 조각(20px)이 서로 겹친다.
   버튼이 조각 두 개보다 좁아지면 가운데가 없어지기 때문이다. 조각을 줄인다. */
@media (max-width:1023px){
  .ca-segmented{gap:6px}


}
/* 알약도 같은 이유로 최소 폭을 지킨다 (조각 29px x 2 = 58px) */
.ca-button-v7[data-ca-button^="pill-"]{min-width:96px}

/* ============================================================
   좁은 화면 매치 설정 줄 정렬 (1023px 이하)

   .set-row 가 flex + space-between 이라 이름표는 왼쪽,
   버튼 묶음은 오른쪽 끝에 몰려 가운데가 텅 비어 있었다.
   두 칸 격자로 세워 이름표 폭을 맞추고, 버튼은 남는 칸을 고르게 나눈다.
   ============================================================ */
@media (max-width:1023px){
  #scr-lobby .set-row{
    display:grid!important;
    grid-template-columns:68px minmax(0,1fr);
    align-items:center;justify-content:stretch!important;
    gap:10px!important;margin-bottom:8px!important;
  }
  #scr-lobby .set-row > [data-ca="settings-label"]{
    font-size:12px;line-height:1.25;color:#5b6b7f;
  }
  /* 버튼 묶음이 칸을 다 쓰고 고르게 나눠 갖는다 */
  #scr-lobby .set-row .ca-segmented{
    display:flex!important;width:100%;gap:6px;
  }
  #scr-lobby .set-row .ca-segmented > button{
    flex:1 1 0;min-width:0;
  }
  /* 맵 선택은 네 칸 균등 + 이름표는 그림 아래 */
  #scr-lobby .set-row .ca-mapseg,
  #scr-lobby .set-row [data-ca="map-selector"]{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;width:100%;
  }
  #scr-lobby .set-row--maps{align-items:center!important}
  #scr-lobby .set-row--maps > [data-ca="settings-label"]{padding-top:0!important}

  /* 제목과 부제가 붙어 있었다 */
  #scr-lobby [data-ca-box="section-header"]{gap:8px}
  #scr-lobby [data-ca-box="header-meta"]{margin-left:2px;white-space:nowrap}


}

/* 결과창 버튼 줄 : 안내 문구가 버튼과 같은 줄에 겹쳐 있었다.
   버튼은 한 줄, 안내는 그 아래 줄로 분명히 나눈다. */
.result-actions,
.ca-v3 [data-ca="result-actions"]{
  display:flex!important;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:10px;
}
.result-actions .result-act{order:1}
.result-actions .result-note,
.ca-v3 [data-ca="result-actions"] .result-note{
  flex:1 0 100%!important;order:2!important;
  width:100%;text-align:center;margin:0!important;
  min-height:0!important;padding:0!important;
  border:0!important;background:none!important;border-radius:0!important;
}
.ca-button-v7[data-ca-button^="pill-"]{min-width:120px}

/* 알약 버튼 : 키트 방식(배경 늘리기) 그대로 두되,
   원본 비율(420x116 = 3.6:1)에서 너무 벗어나 끝이 눌리지 않게 폭을 넓힌다. */
.ca-button-v7[data-ca-button^="pill-"]{
  min-width:150px;height:58px;padding:0 22px;
}
@media (max-width:1023px){
  .ca-button-v7[data-ca-button^="pill-"]{min-width:120px;padding:0 16px;font-size:14px}

}

/* 하단 안내 문구가 두 줄로 접히지 않게 */
@media (max-width:1023px){
  #scr-lobby [data-ca-box="footer"] .ca-waiting-footer__hint{
    font-size:10px;line-height:1.2;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
  }

}

/* ============================================================
   시안 배치 맞추기
   ============================================================ */

/* 대기실 하단 : 나가기 | 안내 | [도감 — 넓게 가운데] | 게임 시작 */
@media (min-width:1024px){
  .ca-v5 [data-ca-box="footer"],
  .ca-v3 [data-ca-box="footer"]{
    display:flex;align-items:center;gap:14px;
  }
  #btnLeave{flex:0 0 auto}
  [data-ca-box="footer"] .ca-waiting-footer__hint{flex:0 0 auto;font-size:12px}
  /* 도감이 남는 자리를 다 먹어 가운데 넓은 버튼이 된다 */
  #btnGuideLobby.ca-guide-open--lobby{
    flex:1 1 auto!important;width:auto!important;max-width:none;margin:0!important;
  }
  [data-ca-box="footer"] [data-ca="start-button"]{flex:0 0 auto;margin-left:0!important}

}

/* 결과창 버튼 : 아이콘 + 글자, 시안처럼 넓게 */
.result-act.ca-button-v7{
  display:inline-flex!important;align-items:center;justify-content:center;
  gap:8px;min-width:190px;padding:0 26px;
  font:950 18px/1 var(--ca-sans);
}
.result-act__ic{font-size:19px;line-height:1}
@media (max-width:1023px),(max-height:560px){
  .result-act.ca-button-v7{min-width:140px;padding:0 16px;font-size:15px}
  .result-act__ic{font-size:16px}

}
.ca-room-summary__label{margin:0;font:800 11px/1.2 var(--ca-sans);color:#8192a5}
.ca-room-summary__ic{
  display:grid;place-items:center;
  width:44px;height:44px;font-size:22px;
  border:2px solid #e8c98d;border-radius:14px;
  background:linear-gradient(180deg,#fffdf6,#f6e7ce);
}
@media (max-width:1023px){
  .ca-room-summary__ic{width:34px;height:34px;font-size:17px;border-radius:11px}

}

/* 결과 요약 : 점수가 생겨 네 칸이 되었다. 한 줄에 고르게 놓는다. */
.result-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;width:100%;
}
.result-stats .rstat{min-width:0;padding:8px 6px!important}
.result-stats .rstat i{font-size:10px}
.result-stats .rstat b{font-size:19px}
.rstat--score b{color:#2a7fbf}
@media (max-width:1023px),(max-height:560px){
  .result-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .result-stats .rstat{padding:5px 4px!important}
  .result-stats .rstat i{font-size:9px}
  .result-stats .rstat b{font-size:15px}

}

/* ============================================================
   결과창 : 플레이트를 모달 안으로

   지금은 플레이트가 모달 위 가장자리에 걸치게 두었는데,
   세로가 낮은 창(1504x772 실측)에서 y=-6 으로 화면 밖으로 잘렸다.
   시안도 플레이트가 모달 안에 들어와 있다. 흐름 안으로 되돌린다.
   ============================================================ */
.ca-v5 [data-ca-skin="result-modal"],
.result-card{
  display:flex;flex-direction:column;align-items:stretch;
  max-height:calc(100dvh - 32px);
  padding:18px 34px 24px!important;
  gap:4px;
}
.ca-v5 [data-ca-skin="result-plate"],
.result-ribbon{
  position:static!important;
  transform:none!important;
  margin:0 auto 10px!important;
  flex:0 0 auto;
}
/* 순위표만 안에서 스크롤하고 나머지는 늘 보인다 */
.result-hero{flex:0 0 auto}
#resultList{flex:1 1 auto;min-height:0;overflow-y:auto}
.result-actions{flex:0 0 auto}

/* 순위 4줄이 스크롤 없이 다 보이게 살짝 조인다 */
.result-card .result-hero{margin-bottom:6px!important}
.result-card .result-stats .rstat{padding:6px 6px!important}
.result-card .result-stats .rstat b{font-size:18px}
.result-card #resultList{padding-top:12px!important;gap:8px}
.result-card .rrow{
  min-height:0!important;padding:9px 16px!important;
}
.result-card .result-actions{margin-top:10px!important}