/* ============================================================
   CRYPTO ARCADE — 레이아웃 복구

   디자인을 바꾸는 파일이 아니다. 색·그림·기능은 그대로 두고
   "겹침 · 잘림 · 찌그러짐" 만 바로잡는다.

   모든 스타일시트 다음에 마지막으로 읽는다.
   여기서 고치는 것은 배치 규칙 하나뿐이고,
   같은 일을 하던 예전 규칙은 각 파일에서 지웠다(중복 누적 금지).
   ============================================================ */

/* ---------------- 1. 전역 기본 ---------------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html,
body,
#app{ width:100%; min-width:0; margin:0; }

img{ max-width:100%; }

button,
input{ min-width:0; }

/* 격자·플렉스 자식은 기본이 min-width:auto 라서
   내용이 길면 칸을 밀어내며 삐져나간다. 0 으로 되돌린다. */
.screen [class*="ca-"],
.screen [data-ca],
.screen [data-ca-box]{ min-width:0; }


/* ---------------- 2. 크기가 고정된 정사각 버튼 ----------------
   채팅 열기 40 · 보내기 42 · 캐릭터 교체 48 · 탈출 126~168.
   폭과 높이를 따로 주지 않고 aspect-ratio 로 묶어 찌그러짐을 원천 차단한다. */
.ca-button-v7[data-ca-button="chat-toggle"],
.ca-button-v7[data-ca-button="send"],
.ca-button-v7[data-ca-button="swap"],
.ca-button-v7[data-ca-button="escape"]{
  flex:0 0 auto;
  aspect-ratio:1;
  height:auto;
  min-height:0;
  padding:0;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border-image:none!important;
}
.ca-button-v7[data-ca-button="chat-toggle"]{ width:40px; }
.ca-button-v7[data-ca-button="send"]{ width:42px; }
.ca-button-v7[data-ca-button="swap"]{ width:48px; }
.ca-button-v7[data-ca-button="escape"]{ width:clamp(126px,16vw,168px); }

/* 좌석 카드 모서리의 캐릭터 바꾸기 버튼만 40. 여기서도 정사각을 지킨다.
   (style.css 의 button{min-height:44px} 때문에 40x44 로 눌려 있었다) */
.seat .ca-card-swap.ca-button-v7[data-ca-button="swap"]{
  width:40px;
  height:auto;
  min-height:0;
  aspect-ratio:1;
}

/* 모바일 터치 영역은 최소 40 */
@media (pointer:coarse){
  .ca-button-v7[data-ca-button="chat-toggle"],
  .ca-button-v7[data-ca-button="send"],
  .ca-button-v7[data-ca-button="swap"]{ min-width:40px; }
}


/* ---------------- 3. 늘어나는 알약 · 세그먼트 ----------------
   높이는 고정, 폭만 늘어난다. 글자는 HTML 그대로 둔다. */
.ca-button-v7[data-ca-button^="pill-"]{
  height:58px;
  min-height:58px;
  padding-block:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.ca-button-v7[data-ca-button^="segment-"]{
  height:40px;
  min-height:40px;
  padding-block:0;
}


/* ---------------- 4. 맵 선택 타일 ----------------
   정사각 비율을 지키고 미리보기는 잘라서 채운다. */
.ca-mapseg button,
[data-ca="map-selector"] button{
  min-width:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  justify-items:center;
  align-items:center;
  gap:3px;
}
.ca-mapseg button canvas,
[data-ca="map-selector"] button canvas{
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  display:block;
}
.ca-mapseg button i,
[data-ca="map-selector"] button i{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ---------------- 5. 빠른 채팅 ----------------
   가로 스크롤을 쓰지 않는다. 네 칸으로 정확히 나눈다. */
.ca-chat__quick{
  min-width:0;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  overflow:visible!important;
}
.ca-chat__quick button{
  min-width:0;
  width:100%;
  padding:0 4px;
  font-size:clamp(10px,2.7vw,12px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (min-width:1024px){
  .ca-chat__quick button{ font-size:11px; }
}


/* ---------------- 6. 채팅 패널 (PC · 모바일 공통 뼈대) ---------------- */
#scr-game .ca-chat,
#scr-lobby .ca-chat{
  min-width:0;
  min-height:0;
}
#scr-game .ca-chat__composer,
#scr-lobby .ca-chat__composer{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px;
  align-items:center;
  gap:8px;
}
#gameChatLog,
#chatLog{
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

/* 게임 화면 상단 플레이어 박스 : 이름 길이(루피 vs AI TRADER 1)에 따라 폭이
   제각각이라 어긋나 보였다 → 4칸을 같은 폭으로 맞춘다(이름은 …로 줄임). */
#scr-game .ca-hud .pcard{ flex:1 1 0; max-width:164px; }
/* 게임 사이드바 채팅 전송 버튼(.ca-send 46px)이 grid 셀(42px)보다 커서
   패널 오른쪽으로 삐져나오던 것 → 셀 폭에 맞춘다. */
#scr-game .game-chat .ca-chat__composer .ca-send{ width:100%; }

/* 모바일 서랍 안의 입력줄 : 높이는 여기서만 정한다.
   (mobile.css 에 38 / 40 / 42 세 벌이 흩어져 있어 버튼이 42x38 로 눌렸다) */
@media (pointer:coarse){
  body.touchmode #scr-game .ca-game-sidebar .ca-chat__composer{
    display:grid;
    grid-template-columns:minmax(0,1fr) 42px;
    align-items:center;
    gap:6px;
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-chat__input{
    height:42px;
    min-height:42px;
  }
}


/* ---------------- 7. 플레이어 명단 ----------------
   네 줄의 열 위치를 똑같이 맞추고, 긴 닉네임은 말줄임. */
#hudRoster{
  min-width:0;
  display:grid;
  gap:6px;
}
#hudRoster .ca-roster__row{
  min-width:0;
  min-height:48px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 58px 24px;
  align-items:center;
  gap:8px;
  padding:6px 10px;
}
#hudRoster .ca-roster__row canvas{
  width:34px;
  height:34px;
  aspect-ratio:1;
}
#hudRoster .ca-roster__nm{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#hudRoster .ca-status{
  justify-self:stretch;
  display:grid;
  place-items:center;
  min-width:0;
}
#hudRoster .ca-roster__ko{
  justify-self:end;
  min-width:0;
}


/* ---------------- 8. 매치 정보 ----------------
   아이콘 · 제목 · 버튼 두 개를 한 줄에. 제목은 남는 만큼만 쓴다. */
#scr-game .ca-room-summary{
  min-width:0;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  padding:10px;
}
#scr-game .ca-room-summary__ic{
  width:40px;
  height:40px;
  aspect-ratio:1;
  flex:0 0 auto;
}
#scr-game .ca-room-summary__body{
  min-width:0;
  grid-column:2;
}
/* 브라우저 기본 문단 여백(위아래 16px) 때문에 카드가 32px 더 두꺼웠다 */
#scr-game .ca-room-summary p{ margin:0; }
#scr-game .ca-room-summary__mode{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* 버튼 묶음이 아니라 버튼 자체를 열에 놓아 높이를 맞춘다 */
#scr-game .ca-room-summary__acts{
  display:contents;
}
#scr-game .ca-room-summary__acts > *{
  height:40px;
  min-height:40px;
  align-self:center;
}


/* ---------------- 9. 모바일 가로 : 오른쪽 서랍 ---------------- */
@media (orientation:landscape) and (max-height:600px){
  body.touchmode #scr-game .ca-game-sidebar{
    width:min(380px,calc(100vw - 16px));
    max-height:calc(100dvh - 16px);
    padding:12px;
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr);
    gap:10px;
    overflow:hidden;
  }
  /* min-height:0 을 주면 칸이 내용보다 작아져 잘린다.
     서랍은 세로로 스크롤되므로 각 칸은 제 높이를 지킨다. */
  body.touchmode #scr-game .ca-game-sidebar > *{ min-width:0; }

  /* 머리글 · 기록 · 입력줄 · 빠른말 (HTML 에 적힌 순서 그대로).
     화면이 낮으면 기록 칸이 먼저 줄어들고, 그래도 모자라면
     서랍 전체가 세로로만 스크롤된다. 서로 겹치지는 않는다. */
  body.touchmode #scr-game .ca-game-sidebar .ca-chat{
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    gap:6px;
    padding:8px;
    min-height:0;
    overflow:hidden;
  }
  /* 기록 칸이 남는 높이를 먹는다. 자리가 없으면 스스로 줄어들고
     안에서 스크롤한다. 아래 입력줄을 밀어내지 않는다. */
  body.touchmode #scr-game .ca-game-sidebar #gameChatLog{
    min-height:0;
    height:100%;
    overflow-y:auto;
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-chat__quick{ gap:4px; }
  body.touchmode #scr-game .ca-game-sidebar .ca-chat__quick button{
    height:32px;
    min-height:32px;
    padding:0 4px;
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-chat > *{ min-width:0; min-height:0; }
  body.touchmode #scr-game .ca-game-sidebar .ca-chat__header{
    display:flex;
    align-items:center;
    padding:0 2px;
  }
  /* --- 서랍 안은 스크롤 없이 한 화면에 담는다 ---
     390 높이 기준 : 매치 정보 48 + 명단 102 + 채팅 170 + 여백 48 = 368.
     모드와 방 코드를 한 줄에 붙여 매치 정보를 한 줄로 줄인 것이 핵심이다. */
  body.touchmode #scr-game .ca-game-sidebar .ca-room-summary{
    grid-template-columns:36px minmax(0,1fr) auto auto;
    gap:6px;
    padding:8px;
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-room-summary__ic{
    width:32px;
    height:32px;
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-room-summary__body{
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-room-summary__code{ white-space:nowrap; }
  body.touchmode #scr-game .ca-game-sidebar .ca-room-summary__acts > *{
    height:34px;
    min-height:34px;
  }

  body.touchmode #scr-game .ca-game-sidebar #hudRoster{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-roster__row{
    min-height:40px;
    grid-template-columns:26px minmax(0,1fr) 44px;
    padding:4px 8px;
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-roster__row canvas{ width:26px; height:26px; }
  body.touchmode #scr-game .ca-game-sidebar .ca-roster__ko{ display:none; }
}

/* 아주 낮은 가로 화면(360 안팎)에서는 명단과 빠른말을 한 뼘씩 줄여
   채팅 기록 칸을 살려 준다. 사라지는 기능은 없다. */
@media (orientation:landscape) and (max-height:400px){
  body.touchmode #scr-game .ca-game-sidebar .ca-roster__row{
    min-height:32px;
    padding:2px 6px;
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-roster__row canvas{ width:22px; height:22px; }
  body.touchmode #scr-game .ca-game-sidebar .ca-chat__quick button{
    height:26px;
    min-height:26px;
  }
}


/* ---------------- 10. 결과창 ----------------
   플레이트는 모달 안. 순위표만 스크롤. */
.result-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  max-height:calc(100dvh - 32px);
}
.result-card > *{ min-width:0; }
.result-card #resultList{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
.result-card .result-hero,
.result-card .result-actions,
.result-card .result-ribbon{ flex:0 0 auto; }
.result-stats{ min-width:0; }
.result-stats .rstat{ min-width:0; }
.rrow{ min-width:0; }
.rrow > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }


/* ---------------- 11. HUD ----------------
   폭이 모자라면 잘라서 숨기지 않고 카드가 줄어들게 한다.
   (game-ui 의 overflow:hidden 은 넘친 카드를 안 보이게만 했다) */
#scr-game .hud{ min-width:0; }
#scr-game .hud > *{ min-width:0; }
#scr-game .hud-left,
#scr-game .hud-right{ min-width:0; overflow:visible; flex-wrap:nowrap; }
#scr-game .pcard,
#scr-game .chip{ min-width:0; flex:0 1 auto; }
#scr-game .hud .pcard .pc-txt{
  min-width:0;
  grid-template-columns:minmax(0,1fr);
}
#scr-game .hud .pcard .pc-nm,
#scr-game .hud .pcard .st{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* 얼굴 그림은 원본이 96px 이라 CSS 로 크기를 주지 않으면
   그대로 96px 이 되어 줄을 밀어냈다. 어디서든 34 정사각으로 고정. */
#scr-game .hud .pcard canvas.pc-face{
  width:34px;
  height:34px;
  aspect-ratio:1;
  flex:0 0 auto;
  display:block;
}
#scr-game .hud .pcard .dot{ flex:0 0 auto; }

/* 아주 좁으면 이름 칸을 접고, 그래도 모자라면 두 줄로 접힌다.
   (카드를 화면 밖으로 밀어내는 것보다 낫다) */
@media (max-width:480px){
  #scr-game .hud .pcard .pc-txt{ display:none; }
  #scr-game .hud-left{ flex-wrap:wrap; row-gap:4px; }
}


/* ---------------- 12. 세로로 든 폰 ----------------
   게임은 가로 전용이다. 세로에서는 안내만 띄우고
   쓸 수 없는 조작부는 아예 내려서 문서가 가로로 밀리지 않게 한다. */
@media (orientation:portrait){
  body.touchmode.ingame:not(.portrait-ok) #touch{ display:none; }
}


/* ---------------- 13. 프로필 카드 ----------------
   아바타 캔버스가 칸보다 커서 닉네임 칸을 덮고 있었다.
   (ui-kit 의 canvas.ca-profile-card__avatar 68px 고정이
    좁은 화면용 56px 칸을 넘어섰다) */
canvas.ca-profile-card__avatar,
.ca-profile-card__avatar{
  width:100%;
  height:auto;
  max-width:68px;
  aspect-ratio:1;
  justify-self:center;
}


/* ---------------- 14. 탈출(연타) 버튼 ----------------
   정사각을 지키려면 안쪽 글자 높이가 폭을 넘으면 안 된다. */
#btnMash.ca-button-v7[data-ca-button="escape"]{
  display:grid;
  align-content:center;
  justify-items:center;
  gap:2px;
  padding:6px;
  line-height:1.05;
}
#btnMash .mash-escape__big{ font-size:clamp(19px,3.4vw,28px); line-height:1.05; }
#btnMash .mash-escape__sub{ font-size:clamp(8px,1.5vw,11px); line-height:1.1; white-space:nowrap; }
#btnMash .mash-escape__bar{ width:82%; height:8px; }

/* ---------------- 15. 로비 하단 푸터 배치 ----------------
   왼쪽: 나가기 + 참여상태(hint 가 남는 공간을 먹어 버튼들을 오른쪽으로 민다)
   오른쪽: 아이템 도감(220~280) + 게임 시작(160~190) — 둘 다 flex:none, 안 늘어난다.
   예전엔 '아이템 도감'이 width:100% 라 푸터를 꽉 채워 지나치게 길었다. */
#scr-lobby .ca-waiting-footer .ca-waiting-footer__hint{ flex:1 1 auto !important; min-width:0; }

#scr-lobby #btnGuideLobby.ca-guide-open--lobby{
  flex:0 0 auto !important;            /* flex-grow 를 죽여야 폭이 안 늘어난다 */
  width:clamp(220px, 24vw, 280px) !important;
  margin:0 !important;
  min-height:46px;
}
/* full-width pill PNG 가 늘어나 깨지던 것 → 늘려도 안 깨지는 그라디언트 */
#btnGuideLobby.ca-button-v7[data-ca-button="pill-secondary-blue"]{
  background-image:none !important;
  background:linear-gradient(180deg,#5cb3ff,#2f7fe0) !important;
  border:2px solid #123f74;
  border-radius:14px;
  box-shadow:0 4px 0 #1f5aa0, 0 8px 16px rgb(16 45 90 / .18);
  height:auto;
  padding:10px 18px;
  color:#fff; font-weight:900; letter-spacing:.01em;
}
#btnGuideLobby.ca-button-v7:hover{ filter:brightness(1.05); }
#btnGuideLobby.ca-button-v7:active{ transform:translateY(3px); box-shadow:0 1px 0 #1f5aa0 !important; }

#scr-lobby .ca-waiting-footer__start.ca-btn-compact{
  flex:0 0 auto !important;
  width:clamp(160px, 18vw, 190px) !important;
  margin:0 !important;
}

/* ---------------- 16. 매치 설정 넘침 + 채팅 짜부 (데스크톱 전 높이) ----------------
   설정 패널이 grid 의 body 를 1fr 로 잡으면, 화면이 높을수록(예:1440×900)
   패널이 늘어나 오른쪽 세로를 다 먹고 그만큼 채팅 메시지 영역이 한 줄로 찌그러진다.
   반대로 화면이 낮으면(≈700px) 내용이 패널 밖으로 삐져나와 맵 선택 줄이 잘렸다.
   → 높이와 무관하게 설정을 '내용 크기(auto)'로 고정하고, 남는 세로는 전부
     채팅이 가져가게 한다. 상한(max-height)을 두지 않아 1440×900 에서도 동일하게 동작한다. */
@media (min-width:1024px){
  #scr-lobby .ca-settings{
    grid-template-rows:auto auto !important;   /* 헤더 + 내용(auto) */
    height:auto !important;
    min-height:0 !important;
    align-self:start !important;
    overflow:visible !important;
  }
  #scr-lobby .ca-waiting-side{
    grid-template-rows:auto minmax(160px,1fr) !important;
    align-content:start !important;
  }
  /* 메시지 목록은 남는 높이를 전부 쓰되, 최소 높이를 확보해 한 줄로 눌리지 않게 한다 */
  #scr-lobby .ca-chat__messages{ min-height:100px !important; }
}

/* ---------------- 17. 대기실 데스크톱 레이아웃 재구성 (≥1024) ----------------
   웹(데스크톱)에서 13겹 디자인 시스템의 배치 규칙(vh-clamp·PNG크기 의존·!important 충돌)이
   화면에 따라 어긋났다(모바일은 mobile.css 라 정상). 그래서 데스크톱 대기실의 "배치"만
   마지막 레이어에서 통째로 다시 잡는다. 색·그림·버튼 스타일·캐릭터는 건드리지 않는다(배치 전용).
   모바일(<1024)은 mobile.css 가 담당하므로 이 블록이 적용되지 않는다. */
@media (min-width:1024px){
  #scr-lobby .ca-waiting-shell{
    display:grid !important; grid-template-rows:auto minmax(0,1fr) auto !important;
    gap:14px !important; padding:18px !important; box-sizing:border-box !important;
  }
  #scr-lobby .ca-waiting-head{
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    gap:12px !important; padding:0 4px 12px !important; margin:0 !important;
  }
  #scr-lobby .ca-waiting-layout{
    display:grid !important; grid-template-columns:minmax(0,1fr) 380px !important;
    gap:16px !important; padding:0 !important; min-height:0 !important;
  }
  #scr-lobby .ca-waiting-main{
    display:grid !important; grid-template-rows:minmax(0,1fr) auto !important; gap:14px !important; min-height:0 !important;
  }
  /* 플레이어 카드 2×2 + 카드 내부 세로 균등 그룹 */
  #scr-lobby .ca-player-grid{
    display:grid !important; grid-template-columns:1fr 1fr !important; grid-template-rows:1fr 1fr !important;
    gap:14px !important; min-height:0 !important;
  }
  #scr-lobby .ca-player-grid .seat{
    position:relative !important; display:flex !important; flex-direction:column !important;
    align-items:center !important; justify-content:center !important; gap:8px !important;
    padding:18px 14px !important; min-width:0 !important; overflow:hidden !important; box-sizing:border-box !important;
  }
  #scr-lobby .ca-player-grid .seat-face{ width:88px !important; height:88px !important; max-height:88px !important; flex:0 0 auto !important; aspect-ratio:1/1 !important; }
  #scr-lobby .ca-player-grid .seat-nm,
  #scr-lobby .ca-player-grid .seat-meta,
  #scr-lobby .ca-player-grid .seat-badge{ margin:0 !important; }
  #scr-lobby .ca-player-grid .corner{ position:absolute !important; top:12px !important; }
  #scr-lobby .ca-player-grid .corner-l{ left:12px !important; right:auto !important; }
  #scr-lobby .ca-player-grid .corner-r{ right:12px !important; left:auto !important; }
  /* 캐릭터 선택 레일 */
  #scr-lobby .ca-character-rail{
    display:grid !important; grid-template-columns:auto minmax(0,1fr) 46px !important;
    align-items:center !important; gap:10px !important; padding:10px 12px !important;
  }
  #scr-lobby .ca-character-rail__tiles{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:8px !important; }
  /* 오른쪽: 설정 / 채팅 */
  #scr-lobby .ca-waiting-side{
    display:grid !important; grid-template-rows:auto minmax(0,1fr) !important; gap:16px !important; min-height:0 !important;
  }
  #scr-lobby .ca-settings .set-row{
    display:grid !important; grid-template-columns:88px minmax(0,1fr) !important;
    align-items:center !important; gap:10px !important; margin:0 0 10px !important;
  }
  #scr-lobby .ca-settings .set-row:last-child{ margin-bottom:0 !important; }
  #scr-lobby .ca-settings .set-row > *:first-child{ white-space:nowrap !important; }
  #scr-lobby .ca-segmented{ display:flex !important; gap:6px !important; }
  #scr-lobby .ca-segmented > button{ flex:1 1 0 !important; min-width:0 !important; }
  /* 맵 선택 행: 라벨 위 + 썸네일 4개 전체폭 → 맵 이름 안 잘림 */
  #scr-lobby .ca-settings .set-row--maps{ grid-template-columns:1fr !important; gap:8px !important; }
  #scr-lobby .ca-settings .set-row--maps .ca-mapseg{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:8px !important; }
  /* 채팅: 헤더 + 본문(.ca-sec-body--chat 안에 메시지+입력줄).
     본문을 grid(메시지 1fr 축소·스크롤 / 입력줄 auto)로 잡아 둘이 절대 겹치지 않게 한다.
     (설정 패널이 커서 채팅이 짧아져도 입력줄은 항상 메시지 아래에 분리돼 놓인다) */
  #scr-lobby .ca-chat{
    display:grid !important; grid-template-rows:auto minmax(0,1fr) !important;
    gap:10px !important; padding:14px !important; box-sizing:border-box !important;
    min-height:150px !important;
  }
  #scr-lobby .ca-sec-body--chat{
    display:grid !important; grid-template-rows:minmax(0,1fr) auto !important;
    gap:10px !important; min-height:0 !important; padding:0 !important; margin:0 !important;
  }
  #scr-lobby .ca-chat__messages{ margin:0 !important; min-height:0 !important; overflow-y:auto !important; }
  #scr-lobby .ca-chat__composer{
    display:grid !important; grid-template-columns:minmax(0,1fr) 42px !important;
    align-items:center !important; gap:8px !important; padding:0 !important; margin:0 !important;
  }
  /* 하단 푸터 */
  #scr-lobby .ca-waiting-footer{
    display:flex !important; align-items:center !important; gap:12px !important; padding:10px 16px !important;
  }
  #scr-lobby .ca-waiting-footer__hint{ flex:1 1 auto !important; min-width:0 !important; }
}

/* ---------------- 19. 모바일 결과 팝업(이겼다/졌다) 가로 줄이기 ----------------
   증상: 결과 카드가 모바일 가로에서 너무 넓게 퍼짐(높이 규칙이 max-height:560 에만
   걸려 일부 폰에선 안 먹고, 먹어도 600px 라 넓었다).
   → landscape·터치 모드에서 카드 폭을 min(88vw,520px) 로 좁혀 반응형으로 맞춘다. */
@media (orientation:landscape) and (max-height:600px){
  body.touchmode .result-card{
    width: min(88vw, 520px) !important;
    max-width: 88vw !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   언어 드롭다운 (첫 화면 옵션 줄) — 새 컴포넌트, 다른 규칙과 겹치지 않는다
   ============================================================ */
.ca-langpick{ position:relative; display:inline-flex }
.ca-lang-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:12px;
  background:#fff; border:2px solid #e6e9f0; color:#2b3a55;
  font-weight:800; font-size:14px; line-height:1; cursor:pointer;
  box-shadow:0 2px 0 rgba(20,30,60,.06);
}
.ca-lang-btn .ca-lang-globe{ font-size:15px }
.ca-lang-btn .ca-lang-caret{ font-size:12px; opacity:.55 }
.ca-lang-btn.open{ border-color:#9db6ff }
.ca-lang-btn.open .ca-lang-caret{ transform:rotate(180deg) }
.ca-lang-menu{
  /* 버튼이 옵션 줄 맨 아래라 위로 편다 — 아래로 펴면 조작법/면책 문구와 겹친다 */
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  min-width:170px; max-width:80vw; z-index:200;
  background:#fff; border:1px solid #e6e9f0; border-radius:14px;
  box-shadow:0 12px 30px rgba(20,30,60,.20);
  padding:10px; box-sizing:border-box;
}
.ca-lang-menu .ca-lang-cur{
  margin:0; padding:4px 8px 8px; font-size:12px; font-weight:700; color:#7b88a3;
  border-bottom:1px solid #eef1f6;
}
.ca-lang-menu .ca-lang-cur b{ color:#2b3a55 }
.ca-lang-opt{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  margin-top:4px; padding:10px; border:0; border-radius:10px;
  background:transparent; color:#2b3a55; font-weight:800; font-size:14px;
  text-align:left; cursor:pointer;
}
.ca-lang-opt:hover{ background:#f3f6fb }
.ca-lang-opt.is-current{ background:#eaf1ff; color:#2f6bff }
.ca-lang-opt.is-current::after{ content:'✓'; font-weight:900 }

/* ============================================================
   결과창 "내 누적 기록" (게임 후 쌓이는 점수) — 새 컴포넌트
   ============================================================ */
.result-mine{
  margin-top:10px; padding:10px 12px; border-radius:12px;
  background:rgba(43,58,85,.06); text-align:center; line-height:1.35;
}
.result-mine .rm-title{ font-size:11px; font-weight:800; letter-spacing:.04em; color:#7b88a3; text-transform:uppercase }
.result-mine .rm-week{ font-size:14px; font-weight:800; color:#2b3a55; margin-top:2px }
.result-mine .rm-best{ font-size:12px; font-weight:700; color:#7b88a3; margin-top:1px }

/* ============================================================
   토큰앱스 TAP 표시 — 타이틀 칩 + 결과창 줄 (로그인 시에만 노출)
   ============================================================ */
.ca-tap-chip{
  margin:8px auto 0; display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px;
  background:linear-gradient(180deg,#fff6d8,#ffe9a8); border:2px solid #f0c65a;
  color:#8a6a12; font-weight:900; font-size:13px; line-height:1;
  box-shadow:0 2px 0 rgba(160,120,20,.15);
}
.result-mine .rm-tap{
  margin-top:6px; font-size:14px; font-weight:900; color:#c9962b;
}