/* ============================================================
   CRYPTO ARCADE — 모바일 · 좁은 화면 레이아웃
   모든 스타일시트 다음에 마지막으로 읽는다. 다만 규칙 전부가
   body.touchmode(터치 기기에만 JS 가 붙인다) 안에 들어 있어서
   PC 레이아웃과 v4 디자인 시스템 검수 결과는 건드리지 않는다.

   세로가 기본이다.
   위 60% 는 보드, 아래 40% 는 조작 패드.
   가로로 눕히면 기존 오버레이 방식이 그대로 남는다.
   ============================================================ */




/* ============================================================
   봉인 탈출 연타 버튼 — 세로·가로 모두
   조이스틱을 좌우로 흔드는 건 손가락으로 하기 어렵다.
   봉인당하면 조작 패드를 덮는 큰 버튼이 뜨고, 두드리면 빠져나온다.
   ============================================================ */
/* .touch button 의 고정 크기(58px)를 이기려면 같은 수준의 선택자가 필요하다 */
.touch .mash-escape{
  display:none;
  position:absolute;inset:8px;z-index:18;
  width:auto;height:auto;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:3px solid #fff;border-radius:var(--ca-radius-xl);
  background:linear-gradient(180deg,#ffd166,#ff9f43);
  color:#5c3200;font-family:var(--ca-sans);
  box-shadow:0 6px 0 #d97d1f,0 12px 24px rgb(var(--ca-shadow-rgb) / .3);
  touch-action:none;user-select:none;-webkit-user-select:none;
  animation:mash-pulse .5s ease-in-out infinite alternate;
}
body.touchmode #scr-game .touch .mash-escape.show{display:flex}
.touch .mash-escape:active{transform:translateY(4px);box-shadow:0 2px 0 #d97d1f}
.mash-escape__big{font:900 clamp(26px,8vw,44px)/1 var(--ca-sans);letter-spacing:.02em}
.mash-escape__sub{font:700 clamp(11px,3.2vw,15px)/1 var(--ca-sans);opacity:.8}
.mash-escape__bar{
  width:min(62%,240px);height:12px;margin-top:4px;
  border-radius:999px;background:rgb(92 50 0 / .22);overflow:hidden;
}
.mash-escape__bar i{
  display:block;height:100%;width:0%;
  border-radius:999px;background:#fff;
  transition:width .09s linear;
}
@keyframes mash-pulse{
  from{filter:brightness(1)}
  to{filter:brightness(1.12)}
}
@media (prefers-reduced-motion:reduce){
  .mash-escape{animation:none}



}

/* 가로에서는 조작부가 화면 전체에 떠 있는 오버레이라, 연타 버튼을
   그대로 두면 보드를 통째로 가린다. 아래 가운데에만 놓는다. */
@media (orientation:landscape) and (max-height:600px){
  body.touchmode #scr-game .touch .mash-escape{
    inset:auto auto calc(10px + env(safe-area-inset-bottom)) 50%;
    transform:translateX(-50%);
    width:min(46vw,340px);height:min(38vh,132px);
    gap:2px;pointer-events:auto;
  }
  body.touchmode #scr-game .touch .mash-escape:active{
    transform:translate(-50%,4px);box-shadow:0 2px 0 #d97d1f;
  }
  .mash-escape__big{font-size:clamp(20px,4.4vh,30px)}
  .mash-escape__sub{font-size:clamp(10px,2vh,13px)}
  .mash-escape__bar{height:9px;margin-top:2px}



}

/* ============================================================
   좁은 가로 화면 — 토큰앱스 같은 임베드 틀이 여기에 들어온다

   [1024px 이상] 사이드바를 그대로 둔다.
     실측: 1103px 틀에서 보드 600 + 사이드바 330 + 여백 = 972 < 1047 이라 넉넉히 들어간다.
     game-ui.css 는 1180px 아래를 전부 서랍으로 돌렸는데 그럴 필요가 없었고,
     그 바람에 임베드 틀에서 채팅이 통째로 사라졌다.

   [1024px 미만] 여기서는 정말 자리가 없다. 서랍으로 접고
     HUD 의 말풍선 버튼으로 연다.
   ============================================================ */

/* 채팅(💬) · 메뉴(⚙) 두 토글을 HUD 한 칸에 나란히 둔다.
   버튼이 숨는 구간에서는 안이 비어 자리를 먹지 않는다. */
.ca-drawer-toggles{display:flex;gap:6px;align-items:center;justify-self:end}
.ca-drawer-toggle--menu{line-height:1;font-size:19px}

@media (min-width:1024px) and (max-width:1180px){
  #scr-game .ca-battle-layout{
    grid-template-columns:minmax(0,1fr) clamp(280px,28vw,330px);
    position:relative;
  }
  /* game-ui.css / v3 가 이 구간에서 서랍으로 밀어 둔 것을 제자리로 되돌린다 */
  #scr-game .ca-game-sidebar{
    display:grid;
    position:static;inset:auto;
    width:auto;max-width:none;
    transform:none;
  }
  /* 사이드바가 늘 보이므로 여는 버튼은 필요 없다 */
  #scr-game .ca-drawer-toggle{display:none!important}
  /* HUD 는 선수·타이머·아이템 세 칸 그대로 */
  #scr-game .hud{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}



}

@media (min-width:768px) and (max-width:1023px){
  #scr-game .ca-battle-layout{
    grid-template-columns:minmax(0,1fr);
    position:relative;                  /* 서랍이 이 안에 붙는다 */
  }
  #scr-game .ca-game-sidebar{
    display:grid;                       /* game-ui.css 가 꺼 둔 것을 되살린다 */
    position:absolute;z-index:20;inset:0 0 0 auto;
    width:min(360px,calc(100% - 24px));
    transform:translateX(calc(100% + 28px));
    transition:transform 180ms ease;
  }
  #scr-game .ca-game-sidebar.is-open{transform:translateX(0)}
  /* 이 구간에서는 game-ui.css 가 버튼을 숨겨 두어 크기 규칙도 같이 없다.
     되살릴 때 모양까지 같이 준다 (안 그러면 HUD 폭만큼 늘어난다) */
  #scr-game .ca-drawer-toggle{
    display:grid;place-items:center;
    flex:0 0 auto;justify-self:end;
    width:44px;height:44px;padding:0;cursor:pointer;
    border:2px solid #0d2a56;border-radius:13px;
    background:linear-gradient(#27466f,#12294f);
    color:#fff;font-size:19px;
    box-shadow:0 3px 0 rgb(6 24 52 / .3);
  }
  #scr-game .ca-drawer-toggle:active{transform:translateY(3px);box-shadow:none}



}

@media (prefers-reduced-motion:reduce){
  #scr-game .ca-game-sidebar{transition:none}



}

/* ============================================================
   좁은 화면(1023px 이하) 대기실 — 한 줄로 쌓고 화면째 스크롤

   여태 대기실은 화면 높이에 맞춰 넣는 배치 그대로였다.
   폰에서는 내용이 844px 화면에 1251px 로 쌓이는데 스크롤이 막혀 있어
   아래쪽(하단 바 포함)에 손이 닿지 않았고, 하단 바 버튼은 폭이 눌려
   "나 가 기" 처럼 글자가 세로로 쪼개졌다.
   ============================================================ */
@media (max-width:1023px){
  #scr-lobby.show{
    display:block;
    height:100vh;height:100dvh;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    padding:0;
  }
  #scr-lobby .lobby{
    /* width:100% + 좌우 여백이 겹쳐 8px 씩 화면 밖으로 나가 있었다 */
    width:auto;max-width:none;
    height:auto;min-height:0;
    margin:8px;
  }

  /* ---- 하단 바 : 화면 아래에 붙여 두고 버튼 크기를 지킨다 ---- */
  #scr-lobby [data-ca-box="footer"]{
    position:sticky;bottom:0;z-index:5;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "leave hint  start"
      "guide guide guide";
    align-items:center;gap:8px;
    width:auto;margin:10px 0 0;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  #scr-lobby [data-ca-box="footer"] #btnLeave{grid-area:leave}
  #scr-lobby [data-ca-box="footer"] .ca-waiting-footer__hint{
    grid-area:hint;font-size:11px;line-height:1.3;text-align:center;
  }
  #scr-lobby [data-ca-box="footer"] #btnStart{grid-area:start}
  #scr-lobby [data-ca-box="footer"] #btnGuideLobby{grid-area:guide;width:100%}
  /* 폭이 눌려도 글자가 세로로 쪼개지지 않게 */
  #scr-lobby [data-ca-box="footer"] .ca-btn-compact{
    width:auto;min-width:0;margin:0;
    padding:4px 14px;min-height:46px;
    grid-template-columns:minmax(0,1fr);
  }
  #scr-lobby [data-ca-box="footer"] .ca-btn-compact .ca-button__icon,
  #scr-lobby [data-ca-box="footer"] .ca-btn-compact .ca-button__trail{display:none}
  #scr-lobby [data-ca-box="footer"] .ca-button__title{white-space:nowrap;font-size:15px}

  /* ---- 박스마다 제 높이를 갖고 넘치면 안에서 스크롤 ---- */
  #scr-lobby .chat-log{max-height:24vh;overflow-y:auto}
  #scr-lobby .ca-character-rail__tiles{
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  }
  /* 좌석은 2×2 로 */
  #scr-lobby .seats{grid-template-columns:repeat(2,minmax(0,1fr))}



}

/* ============================================================
   좁은 화면 결과창 — 순위표만 안에서 스크롤하고 버튼은 늘 보이게
   ============================================================ */
@media (max-width:767px){
  .result-card,
  .ca-v3 [data-ca-box="modal"]{
    display:flex;flex-direction:column;
    width:min(94vw,420px);
    max-height:92dvh;
    padding:14px 14px 16px;
  }
  .result-hero{flex:0 0 auto}
  #resultList{
    flex:1 1 auto;min-height:80px;
    max-height:none;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .result-actions,
  .ca-v3 [data-ca="result-actions"]{flex:0 0 auto;margin-top:12px}
  .result-act.ca-btn-compact{
    flex:1 1 132px;min-height:48px;max-width:none;
    grid-template-columns:minmax(0,1fr);
  }
  .result-act.ca-btn-compact .ca-button__icon{display:none}
  .result-act.ca-btn-compact .ca-button__title{font-size:16px;white-space:nowrap}



}

/* ============================================================
   관전 안내 카드 — ca-v3 가 없는 좁은 화면에서도 제대로 보이게

   v3 는 이 카드를 1024px 이상에서만 꾸며 준다. 폰에서는 꾸밈이 하나도
   붙지 않아 "LIQUIDATED관전 중 다음 라운드를 기다려 주세요" 가 보드 위에
   그냥 겹쳐 찍혔다. 디자인 시스템과 같은 결로 여기서 직접 준다.
   ============================================================ */
@media (max-width:1023px){
[data-ca="spectator-card"]{
  display:grid;justify-items:center;gap:8px;
  width:min(300px,78vw);padding:18px 20px 20px;
  border:3px solid #153a67;border-radius:22px;
  background:linear-gradient(180deg,#fffdf6,#fff1d5);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.92),
    0 6px 0 rgba(35,72,108,.26),
    0 18px 34px rgba(24,55,90,.26);
  font-family:var(--ca-sans);text-align:center;
}
.spectator-tag{
  display:inline-block;padding:5px 16px;
  border:2px solid #153a67;border-radius:999px;
  background:linear-gradient(180deg,#f7938c,#ef5f57);
  color:#fff;font:900 12px/1 var(--ca-sans);letter-spacing:.14em;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 #ba3638;
}
.spectator-title{
  font:950 26px/1.1 var(--ca-sans);color:#153a67;letter-spacing:.02em;
}
.spectator-sub{
  font:700 12px/1.5 var(--ca-sans);color:#6f8195;letter-spacing:.02em;
}



}   /* /max-width:1023px — 1024px 이상은 v3 가 이미 꾸며 준다 */


/* ============================================================
   모바일 게임 — 가로 전용 배치
   (crypto-arcade-mobile-gameplay-landscape-v1 시안 기준)

   왼쪽 조이스틱 / 가운데 정사각 맵 / 오른쪽 액션 버튼.
   맵은 1:1 을 지키며 화면 높이 안에서 가장 크게 잡고,
   조작부는 맵이 쓰고 남은 좌우 여백 안에만 놓아 맵을 가리지 않는다.

   전부 body.touchmode + 가로 조건 안에 있어 PC 화면은 그대로다.
   ============================================================ */
@media (orientation:landscape) and (max-height:600px){
  body.touchmode.ingame{overflow:hidden}

  body.touchmode #scr-game.show{
    /* JS 가 이 값을 보고 조작부 위치를 CSS 에 맡긴다 */
    --ca-mobile-land:1;

    --sa-t:env(safe-area-inset-top);
    --sa-b:env(safe-area-inset-bottom);
    --sa-l:env(safe-area-inset-left);
    --sa-r:env(safe-area-inset-right);

    --hud-h:clamp(34px,10dvh,44px);
    /* 조작부가 쓸 최소 폭 (좌우 각각) */
    --ctrl:132px;
    /* 맵 : 보드와 같은 15:13 으로 잡는다.
       정사각으로 잡으면 위아래 빈 띠만큼 보드가 작아진다. */
    --map-h:min(
      calc(100dvh - var(--sa-t) - var(--sa-b) - 6px),
      calc((100dvw - var(--sa-l) - var(--sa-r) - var(--ctrl) * 2) * 13 / 15)
    );
    --map-w:calc(var(--map-h) * 15 / 13);
    /* 맵 양옆에 남는 폭 = 조작부가 쓸 자리 */
    --side:calc((100dvw - var(--sa-l) - var(--sa-r) - var(--map-w)) / 2);

    position:fixed;inset:0;
    width:100dvw;height:100dvh;
    display:flex;flex-direction:column;
    padding:var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l);
    margin:0;overflow:hidden;
    touch-action:none;overscroll-behavior:none;
    /* 맵 양옆 빈 띠를 마을 배경 아트로 채운다 (크레이지아케이드 게임기 느낌).
       살짝 밝은 막을 덧대 HUD 글자 대비를 지킨다. */
    background:
      linear-gradient(rgb(247 252 255 / .30), rgb(247 252 255 / .30)),
      url("/assets/title-bg-wide.webp") center center / cover no-repeat,
      #dff0f7;
  }

  body.touchmode #scr-game .game-wrap{
    position:relative;
    display:flex;flex-direction:column;
    flex:1 1 auto;min-height:0;width:100%;max-width:none;margin:0;gap:0;
    align-items:stretch;
  }
  body.touchmode #scr-game .ca-game-shell{
    display:flex;flex-direction:column;
    flex:1 1 auto;min-height:0;
    padding:0;gap:0;border:0;border-radius:0;background:none;box-shadow:none;
  }

  /* ---- 1단 : HUD 한 줄 (선수 · 타이머 · 폭탄/폭발/속도 · 채팅) ---- */
  /* HUD 는 한 줄을 차지하지 않고 화면 위에 뜬다. 그만큼 맵이 커진다. */
  body.touchmode #scr-game .hud{
    position:absolute;top:0;left:0;right:0;z-index:16;
    height:var(--hud-h);flex:0 0 auto;
    display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;
    align-items:center;gap:6px;
    padding:2px 8px;
    border:0;border-radius:0;box-shadow:none;background:none;
    pointer-events:none;
  }
  body.touchmode #scr-game .hud > *{pointer-events:auto}
  body.touchmode #scr-game .hud-left{
    display:flex;flex-wrap:nowrap;gap:5px;justify-content:flex-start;overflow:hidden;
  }
  body.touchmode #scr-game .hud-left .pcard{
    flex:0 0 auto;min-height:0;gap:4px;
    padding:2px 6px;font-size:10px;border-width:2px;
  }
  body.touchmode #scr-game .hud-left .pcard canvas{width:20px;height:20px}
  body.touchmode #scr-game .hud-left .pcard .dot{width:16px;height:16px;font-size:6px}
  body.touchmode #scr-game .hud-left .pcard .st{display:none}

  body.touchmode #scr-game .hud-center{display:flex;align-items:center;justify-content:center}
  body.touchmode #scr-game .blockinfo{display:none}
  body.touchmode #scr-game .timer{
    font-size:clamp(14px,3.2dvh,19px);padding:2px 14px;border-width:2px;
  }

  /* 폭탄 · 폭발 · 속도 : 숨기지 않고 오른쪽에 한 줄로 */
  body.touchmode #scr-game .hud-right{
    display:flex;flex-wrap:nowrap;gap:5px;justify-content:flex-end;overflow:hidden;
  }
  body.touchmode #scr-game .hud-right .chip{
    flex:0 0 auto;font-size:11px;padding:3px 8px;border-width:2px;gap:4px;
  }
  body.touchmode #scr-game .hud-right .chip canvas{width:16px;height:16px}
  body.touchmode #scr-game .hud-right .chip .lb{display:none}

  body.touchmode #scr-game .ca-drawer-toggle{
    display:grid;place-items:center;
    flex:0 0 auto;justify-self:end;
    width:40px;height:40px;padding:0;font-size:17px;cursor:pointer;
    border:2px solid #0d2a56;border-radius:13px;
    background:linear-gradient(#27466f,#12294f);color:#fff;
    box-shadow:0 3px 0 rgb(6 24 52 / .3);
  }

  /* ---- 2단 : 맵. 가운데, 1:1 ---- */
  body.touchmode #scr-game .ca-battle-layout{
    display:grid;place-items:center;
    /* 1024px 이상에서 game-ui 가 넣어 둔 (보드 + 사이드바) 두 칸 격자를 지운다.
       안 지우면 사이드바 자리가 남아 맵이 왼쪽으로 쏠린다. */
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    flex:1 1 auto;min-height:0;height:100%;
    padding:0;gap:0;border:0;background:none;box-shadow:none;
  }
  body.touchmode #scr-game .stage{
    position:relative;
    display:grid;place-items:center;
    width:var(--map-w);height:var(--map-h);
    max-width:none;min-height:0;padding:0;
  }
  body.touchmode #scr-game .ca-map-frame{
    width:100%;height:100%;
    display:grid;place-items:center;
    aspect-ratio:auto;max-width:none;max-height:none;
  }
  /* 600x520 과 15:13 은 같은 비율이라 꽉 채워도 찌그러지지 않는다 */
  body.touchmode #scr-game #cv{
    width:100%;height:100%;max-width:100%;max-height:100%;
    border-radius:var(--ca-radius-lg);
  }
  body.touchmode #scr-game .stage-msg{position:absolute;inset:0}

  /* ---- 3단 : 조작부. 맵이 남긴 좌우 여백 안에만 ---- */
  body.touchmode #scr-game .touch{
    display:block;position:absolute;
    inset:0;
    z-index:15;padding:0;margin:0;
    background:none;border:0;box-shadow:none;
    pointer-events:none;height:auto;min-height:0;
  }

  /* 조이스틱 : 왼쪽 여백 전체가 잡는 영역이라 어디를 눌러도 그 자리에 생긴다 */
  body.touchmode #scr-game .stick-zone{
    position:absolute;left:0;top:var(--hud-h);bottom:0;
    width:var(--side);min-height:0;
    pointer-events:auto;
  }
  body.touchmode #scr-game .stick{
    --stick-size:clamp(112px,32dvh,150px);
    --knob-size:clamp(48px,13dvh,64px);
    /* 존은 맵까지 넓어졌지만, 손을 떼면 왼쪽 여백 띠 가운데에서 대기한다
       (맵 한복판에 조이스틱이 남지 않게) */
    --rest-x:calc(var(--side) / 2);
    --rest-y:50%;
  }

  /* 액션 : 오른쪽 여백 가운데. 폭탄이 크고 아래, 보조는 작고 위 */
  body.touchmode #scr-game .acts{
    position:absolute;right:0;top:var(--hud-h);bottom:0;
    display:grid;place-items:center;align-content:center;
    gap:clamp(10px,2.6dvh,18px);
    width:var(--side);height:auto;
    pointer-events:auto;
  }
  /* 시안대로 보조(투척)가 위, 폭탄이 아래 */
  body.touchmode #scr-game .acts .act-throw{
    order:1;position:static;
    width:clamp(56px,16dvh,64px)!important;
    height:clamp(56px,16dvh,64px)!important;
    border-radius:50%!important;
    font-size:clamp(10px,2.4dvh,12px)!important;
    display:grid;place-items:center;line-height:1.05;
  }
  body.touchmode #scr-game .acts .act-throw i{
    font-style:normal;font-weight:700;font-size:8px;letter-spacing:.04em;opacity:.72;
  }
  body.touchmode #scr-game .acts .act-throw[aria-disabled="true"]{opacity:.42;filter:grayscale(.65)}
  body.touchmode #scr-game .acts .act-bomb{
    order:2;position:static;
    width:clamp(84px,24dvh,112px)!important;
    height:clamp(84px,24dvh,112px)!important;
    border-radius:50%!important;
    font-size:clamp(16px,4dvh,22px)!important;
  }
  body.touchmode #scr-game .touch button{box-shadow:0 5px 0 #31577f;opacity:1}
  body.touchmode #scr-game .touch button:active{transform:translateY(3px);box-shadow:0 1px 0 #31577f}

  /* ---- 채팅은 게임 중 감춘다. 말풍선 버튼으로 오른쪽에서 연다 ---- */
  body.touchmode #scr-game .ca-game-sidebar{
    display:flex;flex-direction:column;gap:8px;
    position:fixed;inset:0 0 0 auto;z-index:30;
    width:min(340px,82vw);max-height:none;
    padding:10px calc(10px + env(safe-area-inset-right)) 10px 10px;
    overflow:hidden;
    border-radius:var(--ca-radius-xl) 0 0 var(--ca-radius-xl);
    transform:translateX(101%);transition:transform .22s ease-out;
  }
  body.touchmode #scr-game .ca-game-sidebar.is-open{transform:translateX(0)}
  body.touchmode #scr-game .ca-game-sidebar .ca-room-summary__label{display:none}
  body.touchmode #scr-game .ca-game-sidebar .ca-roster{flex:0 0 auto}
  body.touchmode #scr-game .ca-game-sidebar .ca-chat{
    flex:1 1 auto;display:flex;flex-direction:column;gap:6px}
  body.touchmode #scr-game .ca-game-sidebar .chat-log{flex:1 1 auto;overflow-y:auto}
  body.touchmode #scr-game .ca-game-sidebar .ca-chat__composer{flex:0 0 auto;padding:0}

  /* 결과창은 화면 안에 */
  body.touchmode #scr-game .result-overlay{position:fixed;inset:0}



}

/* ============================================================
   모바일 세로 — 게임은 하지 않고 안내만
   (축소해서 억지로 보여주지 않는다)
   ============================================================ */
@media (orientation:portrait){
  body.touchmode.ingame .rotate-hint{display:grid;z-index:40}



}

/* ---- 가로 모바일 채팅 서랍 속 모양 ----
   1024px 미만에서는 v3/v5 꾸밈이 꺼져 있어 서랍 안이 민무늬로 나온다.
   판·머리글·명단 줄을 여기서 직접 그려 준다. */
@media (orientation:landscape) and (max-height:600px){
  body.touchmode #scr-game .ca-game-sidebar{
    background:linear-gradient(180deg,#fffdf6,#f8ead1);
    border-left:3px solid #153a67;
    box-shadow:-10px 0 26px rgb(20 44 74 / .22);
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-room-summary__code{
    font:700 11px/1.2 var(--ca-sans);color:#7b8aa0;margin:2px 0 0;
  }

  /* 플레이어 명단 */
  body.touchmode #scr-game .ca-game-sidebar .ca-roster{
    display:flex;flex-direction:column;gap:5px;
    padding:8px;border:2px solid #e8c98d;border-radius:14px;
    background:rgb(255 253 247 / .9);
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-roster__head{
    display:grid;grid-template-columns:26px minmax(0,1fr) 46px 26px;
    align-items:center;gap:8px;padding:0 6px;
    font:800 10px/1 var(--ca-sans);color:#8192a5;letter-spacing:.04em;
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-roster__head span:first-child{grid-column:1 / 3}
  body.touchmode #scr-game .ca-game-sidebar .ca-status{
    display:grid;place-items:center;
    padding:2px 0;border-radius:999px;
    font:800 10px/1 var(--ca-sans);color:#fff;
    background:linear-gradient(180deg,#8fd97a,#4fae3c);
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-status--sealed{background:linear-gradient(180deg,#8fc7f5,#3f86c8)}
  body.touchmode #scr-game .ca-game-sidebar .ca-status--liquidated{background:linear-gradient(180deg,#b9c2cf,#7d8899)}

  /* 채팅 */
  body.touchmode #scr-game .ca-game-sidebar .ca-chat{
    padding:8px;border:2px solid #e8c98d;border-radius:14px;
    background:rgb(255 253 247 / .9)}
  body.touchmode #scr-game .ca-game-sidebar .ca-chat__header{
    font:800 12px/1 var(--ca-sans);color:#153a67;padding:0 2px 2px;
  }
  body.touchmode #scr-game .ca-game-sidebar .chat-log{
    border:1.5px solid #bed7e8;border-radius:11px;
    background:linear-gradient(180deg,#f8fcff,#f0f8fc);
    padding:6px;font-size:11px}
  body.touchmode #scr-game .ca-game-sidebar .ca-chat__composer{
    display:grid;gap:6px}
  body.touchmode #scr-game .ca-game-sidebar .ca-chat__input{font-size:12px}
  body.touchmode #scr-game .ca-game-sidebar .ca-send{padding:0}



}

/* ============================================================
   채팅(💬) = 로블록스식 떠 있는 팝업 (가로 모바일 전용, #chatPopup)
   ★ 데스크톱/세로에서는 hidden 그대로 → 웹 사이드바 레이아웃은 원본 유지.
   ============================================================ */
@media (orientation:landscape) and (max-height:600px){
  /* ⚙ 메뉴(사이드바)에서는 채팅 섹션을 숨긴다. 채팅은 아래 팝업이 담당. */
  body.touchmode #scr-game #gameSidebar .game-chat{display:none}

  /* 팝업 : 기본 hidden 유지, is-open 일 때만 왼쪽 빈 띠 안에 뜬다.
     띠 폭 안에만 들어가므로 맵을 가리지 않는다. ✕ 나 💬 로 닫는다. */
  body.touchmode #scr-game #chatPopup.is-open{
    display:flex;flex-direction:column;gap:5px;
    position:fixed;z-index:28;
    left:calc(var(--sa-l) + 6px);right:auto;
    top:calc(var(--sa-t) + var(--hud-h) + 82px);bottom:auto;
    width:min(calc(var(--side) - 10px), 300px);min-width:140px;
    height:min(58dvh, calc(100dvh - var(--sa-t) - var(--hud-h) - 96px));
    padding:7px;border-radius:15px;
    background:rgb(255 253 247 / .95);
    border:2px solid #153a67;
    box-shadow:0 12px 28px rgb(20 44 74 / .34);
  }
  body.touchmode #scr-game #chatPopup .ca-chat-popup__head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto;
  }
  body.touchmode #scr-game #chatPopup .ca-chat-popup__title{font:800 13px/1 var(--ca-sans);color:#153a67}
  body.touchmode #scr-game #chatPopup .ca-chat-popup__close{
    flex:0 0 auto;width:26px;height:26px;padding:0;cursor:pointer;
    border:0;border-radius:8px;background:rgb(21 58 103 / .1);color:#153a67;
    font-size:13px;line-height:1;display:grid;place-items:center;
  }
  body.touchmode #scr-game #chatPopup .ca-chat-popup__close:active{transform:translateY(1px)}
  body.touchmode #scr-game #chatPopup .ca-chat-popup__log{
    flex:1 1 auto;min-height:96px;overflow-y:auto;
    display:flex;flex-direction:column;gap:3px;
    padding:6px;border-radius:11px;border:1.5px solid #bed7e8;
    background:linear-gradient(180deg,#f8fcff,#f0f8fc);
    font-size:12px;line-height:1.4;color:#1c3553;
  }
  body.touchmode #scr-game #chatPopup .ca-chat-popup__log .nick{font-weight:800;margin-right:4px;color:#2f7fe0}
  body.touchmode #scr-game #chatPopup .ca-chat-popup__log .is-self .nick{color:#e08a2f}
  body.touchmode #scr-game #chatPopup .ca-chat-popup__log .is-system{color:#7b8aa0}
  body.touchmode #scr-game #chatPopup .ca-chat-popup__bar{display:flex;gap:5px;flex:0 0 auto}
  body.touchmode #scr-game #chatPopup .ca-chat-popup__input{
    flex:1 1 auto;min-width:0;height:32px;border-radius:9px;
    border:1.5px solid #bed7e8;background:#fff;color:#12233f;
    padding:0 9px;font:600 12px/1 var(--ca-sans);
  }
  body.touchmode #scr-game #chatPopup .ca-chat-popup__send{
    flex:0 0 auto;width:34px;height:32px;padding:0;border:0;border-radius:9px;cursor:pointer;
    background:linear-gradient(180deg,#4aa3ff,#2f7fe0);color:#fff;font-size:13px;
    display:grid;place-items:center;box-shadow:0 3px 0 #235fa8;
  }
  body.touchmode #scr-game #chatPopup .ca-chat-popup__quick{display:flex;flex-wrap:wrap;gap:4px;flex:0 0 auto}
  body.touchmode #scr-game #chatPopup .ca-chat-popup__quick button{
    flex:1 1 auto;min-width:0;padding:5px 6px;border:0;border-radius:8px;cursor:pointer;
    background:rgb(21 58 103 / .08);color:#153a67;font:700 10px/1.1 var(--ca-sans);
  }
}

/* ---- 가로 모바일 결과창 ----
   화면이 낮아 시안 크기 그대로는 위아래가 잘린다.
   순위표만 안에서 스크롤하고 플레이트·버튼은 항상 보이게 한다. */
@media (orientation:landscape) and (max-height:560px){
  body.touchmode .result-overlay{padding:8px}
  body.touchmode .result-card{
    display:flex;flex-direction:column;
    width:min(94vw,600px);
    max-height:calc(100dvh - 16px);
    padding:26px 16px 12px!important;
    gap:6px;
  }
  body.touchmode .result-ribbon{
    top:-14px!important;
    min-height:40px!important;
    width:min(240px,64%)!important;
    font-size:14px!important;
  }
  body.touchmode .result-hero{
    flex:0 0 auto;gap:10px;
  }
  body.touchmode .result-face{width:74px!important;height:74px!important}
  body.touchmode .result-big{font-size:26px!important}
  body.touchmode .result-sub{font-size:11px!important}
  body.touchmode .result-stats{gap:8px}
  body.touchmode .rstat{min-width:0;padding:4px 10px!important}
  body.touchmode .rstat i{font-size:9px!important}
  body.touchmode .rstat b{font-size:15px!important}

  body.touchmode #resultList{
    flex:1 1 auto;min-height:52px;max-height:none;
    overflow-y:auto;padding-top:10px;
  }
  body.touchmode .rrow{
    min-height:0!important;padding:5px 12px!important;font-size:11px!important;
    position:relative;
  }
  /* 왕관이 줄 안으로 흘러들어 두 줄이 되던 것을 막는다 */
  body.touchmode .rank-crown{
    position:absolute!important;top:-11px;left:8px;
    width:20px!important;height:20px!important;
  }

  body.touchmode .result-actions{flex:0 0 auto;margin-top:8px!important;gap:8px}
  body.touchmode .result-act.ca-btn-compact{
    min-height:40px!important;flex:1 1 120px;
  }
  body.touchmode .result-act .ca-button__title{font-size:14px!important}
  body.touchmode .result-actions .result-note{font-size:10px!important}



}

  /* 1024px 미만에서는 v3/v5 버튼 꾸밈이 꺼져 있어 결과창 버튼이 민무늬가 된다.
     여기서 직접 칠해 준다. */
@media (orientation:landscape) and (max-height:560px){
  body.touchmode .result-act.ca-btn-compact{
    border:2px solid #0d2a56!important;border-radius:999px!important;
    color:#fff!important;box-shadow:0 4px 0 rgb(6 24 52 / .32)!important;
  }
  body.touchmode #btnResultLobby.result-act{background:linear-gradient(180deg,#62d6f4,#2a9ed4)!important}
  body.touchmode #btnResultAgain.result-act{background:linear-gradient(180deg,#ffc642,#ff8f16)!important}
  body.touchmode .result-act:active{transform:translateY(3px);box-shadow:0 1px 0 rgb(6 24 52 / .32)!important}
  /* 안내 문구는 버튼 아래 한 줄로 */
  body.touchmode .result-actions .result-note{
    flex:1 0 100%;order:2;min-height:0!important;
    padding:0!important;margin:0!important;
    background:none!important;border:0!important;border-radius:0!important;
    text-align:center;color:#7b8aa0!important;font-size:10px!important;line-height:1.2!important;
  }
  /* 순위 4줄은 스크롤 없이 보이게 */
  body.touchmode #resultList{min-height:104px!important;padding-top:8px!important}
  body.touchmode .result-card{padding:24px 14px 8px!important;gap:4px}



}

/* ---- 봉인 탈출 연타 버튼 (가로 모바일) ----
   갇히면 어차피 움직일 수 없으니 조이스틱 자리를 그대로 쓴다.
   맵을 가리지 않고, 그래도 뒤가 비치도록 반투명으로 둔다. */
@media (orientation:landscape) and (max-height:600px){
  /* 조이스틱이 있던 자리에 같은 크기로 앉는 동그란 버튼.
     갇히면 못 움직이니 조이스틱 자리를 그대로 쓴다. 맵은 가리지 않는다. */
  body.touchmode #scr-game .touch .mash-escape{
    inset:auto;
    left:calc(var(--side) / 2);
    top:calc((var(--sa-t) + 96px + 100dvh) / 2);
    transform:translate(-50%,-50%);
    width:clamp(126px,36dvh,168px);
    height:clamp(126px,36dvh,168px);
    border-radius:50%;
    gap:2px;padding:0 10px;pointer-events:auto;
    opacity:.96;
  }
  body.touchmode #scr-game .touch .mash-escape:active{
    transform:translate(-50%,calc(-50% + 3px));
    box-shadow:0 2px 0 #d97d1f;
  }
  body.touchmode #scr-game .touch .mash-escape .mash-escape__big{
    font-size:clamp(20px,5.2dvh,28px);
  }
  body.touchmode #scr-game .touch .mash-escape .mash-escape__sub{
    font-size:clamp(9px,2.1dvh,12px);
  }
  body.touchmode #scr-game .touch .mash-escape .mash-escape__bar{
    width:74%;height:9px;margin-top:2px;
  }



}

/* 떠 있는 HUD 가 보드 맨 윗줄(부술 수 없는 바깥벽)에 살짝 걸친다.
   경계가 어색하지 않게 위에서 아래로 사라지는 옅은 바탕을 깐다. */
@media (orientation:landscape) and (max-height:600px){
  body.touchmode #scr-game .hud{isolation:isolate}
  body.touchmode #scr-game .hud::before{
    content:"";position:absolute;inset:-2px 0 0 0;z-index:-1;
    background:linear-gradient(180deg,rgb(232 243 255 / .95),rgb(232 243 255 / .55) 62%,rgb(232 243 255 / 0));
    pointer-events:none;
  }



}

/* ============================================================
   HUD 를 좌우 여백 안으로 (가로 모바일)

   HUD 를 화면 위에 띄웠더니 맵이 커진 대신 보드 위 36px 을 덮었다.
   첫 줄은 부술 수 없는 바깥벽이라 괜찮지만 둘째 줄은 사람이 시작하는 자리다.
   가려선 안 된다.

   맵은 높이만 꽉 채우고 좌우로는 폭이 남는다. 그 남는 자리에 HUD 를 넣는다.
   왼쪽 여백 : 타이머 + 플레이어  /  오른쪽 여백 : 아이템 + 채팅
   덕분에 맵은 그대로 크고, 보드는 한 칸도 가려지지 않는다.
   ============================================================ */
@media (orientation:landscape) and (max-height:600px){
  /* HUD 자체는 자리를 차지하지 않는 껍데기 */
  body.touchmode #scr-game .hud{
    position:absolute;inset:0;z-index:16;
    display:block;height:auto;
    padding:0;gap:0;background:none;pointer-events:none;
    /* HUD 가 화면 전체를 덮게 되었으므로 뒤를 흐리는 효과는 반드시 꺼야 한다.
       (켜져 있으면 맵과 조작부까지 통째로 뿌옇게 된다) */
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    border:0;box-shadow:none;
  }
  body.touchmode #scr-game .hud::before{content:none}
  body.touchmode #scr-game .hud > *{pointer-events:auto}

  /* --- 왼쪽 여백 : 타이머 --- */
  body.touchmode #scr-game .hud-center{
    position:absolute;left:0;top:calc(var(--sa-t) + 6px);
    width:var(--side);
    display:flex;align-items:center;justify-content:center;
  }
  body.touchmode #scr-game .timer{
    font-size:clamp(15px,4dvh,22px);padding:3px 16px;border-width:2px;
  }

  /* --- 왼쪽 여백 : 플레이어 (타이머 아래, 두 줄) --- */
  /* 2x2 로 떨어지게 폭을 잡는다 (3+1 로 갈라지면 보기 안 좋다) */
  body.touchmode #scr-game .hud-left{
    position:absolute;left:0;top:calc(var(--sa-t) + 42px);
    width:var(--side);
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    justify-items:center;align-content:start;
    gap:4px;padding:0 8px;overflow:visible;
  }
  body.touchmode #scr-game .hud-left .pcard{
    flex:0 0 auto;min-height:0;gap:3px;
    padding:2px 5px;font-size:9px;border-width:2px;
  }
  body.touchmode #scr-game .hud-left .pcard canvas{width:17px;height:17px}
  body.touchmode #scr-game .hud-left .pcard .dot{width:14px;height:14px;font-size:6px}

  /* --- 오른쪽 여백 : 채팅·플레이어 토글 두 개(맨 위, 나란히) + 아이템 칩 ---
     래퍼를 우상단에 절대배치하고, 버튼 둘은 그 안에서 flex 로 나란히 놓는다.
     (예전엔 버튼 하나를 직접 absolute 했는데, 둘로 늘면서 겹쳤다) */
  body.touchmode #scr-game .ca-drawer-toggles{
    position:absolute;right:calc(var(--sa-r) + 8px);top:calc(var(--sa-t) + 6px);
    z-index:1;
  }
  body.touchmode #scr-game .ca-drawer-toggle{
    position:static;
    width:38px;height:38px;
  }
  body.touchmode #scr-game .hud-right{
    position:absolute;right:0;top:calc(var(--sa-t) + 50px);
    width:var(--side);
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:4px;padding:0 6px;overflow:visible;
  }
  body.touchmode #scr-game .hud-right .chip{
    flex:0 0 auto;font-size:10px;padding:2px 7px;border-width:2px;gap:3px;
  }
  body.touchmode #scr-game .hud-right .chip canvas{width:15px;height:15px}

  /* 맵은 화면 세로를 전부 쓴다 (이제 위를 덮는 것이 없다) */
  body.touchmode #scr-game .ca-battle-layout{padding:0}

  /* 조이스틱을 잡는 영역은 왼쪽 여백 + 맵 전체 (오른쪽 버튼 띠만 뺀다).
     맵 어디를 눌러도 그 자리에 조이스틱이 뜬다 — 손을 정확히 왼쪽 띠에 올릴 필요가 없다.
     조이스틱 본체는 반투명이라 맵 위에 떠도 시야를 크게 가리지 않는다.
     폭탄·투척 버튼은 오른쪽 띠(.acts)에 그대로 있어 겹치지 않는다. */
  body.touchmode #scr-game .stick-zone{
    left:0;right:auto;top:calc(var(--sa-t) + 96px);bottom:0;
    width:calc(100dvw - var(--sa-l) - var(--sa-r) - var(--side));height:auto;
  }
  body.touchmode #scr-game .acts{
    left:auto;right:0;top:calc(var(--sa-t) + 96px);bottom:0;
    width:var(--side);height:auto;
    align-content:center;justify-items:center;
  }



}

/* ---- 채팅 서랍 손보기 (가로 모바일) ----
   1) 플레이어를 줄 목록 대신 2x2 박스 네 개로 (세로를 덜 먹는다)
   2) 그만큼 채팅에 높이를 몰아줘 메시지와 입력창이 제대로 보이게
   3) '나가기' 글자를 '아이템' 버튼과 같은 크기·굵기로 */
@media (orientation:landscape) and (max-height:600px){
  body.touchmode #scr-game .ca-game-sidebar .ca-guide-open,
  body.touchmode #scr-game .ca-game-sidebar .ca-btn-compact{
    display:grid;place-items:center;
    width:auto;min-width:0;min-height:32px;padding:0 14px;margin:0;
    border:2px solid #0d2a56;border-radius:999px;
    font:800 12px/1 var(--ca-sans);color:#fff;
    box-shadow:0 3px 0 rgb(6 24 52 / .3);
    grid-template-columns:minmax(0,1fr);
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-guide-open{
    background:linear-gradient(#62d6f4,#2a9ed4);
  }
  body.touchmode #scr-game .ca-game-sidebar #btnLeaveGame{
    background:linear-gradient(#fffdf5,#efe0c4);
    color:#3c4a5c;border-color:#9e825a;
    box-shadow:0 3px 0 rgb(120 96 58 / .34);
  }
  /* 안쪽 3열 격자를 없애 글자가 '아이템' 과 같은 크기로 나오게 */
  body.touchmode #scr-game .ca-game-sidebar .ca-btn-compact .ca-button__copy{display:contents}
  body.touchmode #scr-game .ca-game-sidebar .ca-btn-compact .ca-button__title{
    font:800 12px/1 var(--ca-sans);color:inherit;
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-btn-compact .ca-button__icon,
  body.touchmode #scr-game .ca-game-sidebar .ca-btn-compact .ca-button__trail{display:none}
  body.touchmode #scr-game .ca-game-sidebar .ca-roster__head{display:none}
  /* grid-area:meta 는 예전 영역식 배치의 잔재였다.
     지금 명단 줄에는 그런 영역이 없어서 배지가 격자 밖
     (없는 4·5번 칸) 으로 밀려 이름 칸을 짓눌렀다. */
  body.touchmode #scr-game .ca-game-sidebar .ca-status{
    justify-self:stretch;
    padding:1px 7px;font-size:9px;
  }

  /* --- 채팅 : 남는 높이를 전부 --- */
  body.touchmode #scr-game .ca-game-sidebar .ca-chat{
    flex:1 1 auto}
  body.touchmode #scr-game .ca-game-sidebar .chat-log{
    flex:1 1 auto}
  body.touchmode #scr-game .ca-game-sidebar .ca-chat__input{font-size:13px}



}

/* ============================================================
   좁은 화면 마무리 (1024px 미만 — v3/v5 꾸밈이 꺼지는 구간)
   ============================================================ */
@media (max-width:1023px){
  /* --- 닉네임은 왼쪽 정렬 ---
     둘레에서 물려받은 가운데 정렬 때문에 이름표처럼 보이지 않았다. */
  .ca-profile-card{text-align:left}
  .ca-profile-card__field,
  .ca-profile-card__label,
  .ca-profile-card__name,
  input.ca-profile-card__name{text-align:left}

  /* --- 대기실 채팅 : 매치 설정과 같은 틀을 준다 --- */
  #scr-lobby .ca-chat{
    border:2px solid #e8c98d;border-radius:18px;
    background:linear-gradient(180deg,#fffdf6,#f8ead1);
    box-shadow:inset 0 2px 0 rgb(255 255 255 / .94),0 4px 0 rgb(154 111 49 / .15);
    padding:10px 12px 12px;
  }
  #scr-lobby .ca-chat .chat-log{
    border:1.5px solid #bed7e8;border-radius:12px;
    background:linear-gradient(180deg,#f8fcff,#f0f8fc);
    padding:8px;min-height:56px;
  }
  #scr-lobby .ca-chat__composer{
    display:grid;grid-template-columns:minmax(0,1fr) 44px;
    gap:8px;align-items:center;margin-top:8px;padding:0;
  }
  #scr-lobby .ca-chat__input{min-height:42px}
  #scr-lobby .ca-send{width:44px;height:42px;padding:0}

  /* --- 하단 버튼도 색을 되살린다 (v3 가 꺼져 민무늬였다) --- */
  #scr-lobby [data-ca-box="footer"] .ca-btn-compact{
    border:2px solid #0d2a56;border-radius:999px;
    color:#fff;box-shadow:0 4px 0 rgb(6 24 52 / .3);
  }
  #scr-lobby [data-ca-box="footer"] .ca-btn-compact .ca-button__title{color:inherit}
  #scr-lobby [data-ca-box="footer"] #btnLeave{
    background:linear-gradient(#fffdf5,#efe0c4);
    color:#3c4a5c;border-color:#9e825a;
    box-shadow:0 4px 0 rgb(120 96 58 / .34);
  }
  #scr-lobby [data-ca-box="footer"] #btnStart{
    background:linear-gradient(#ffc642,#ff8f16);
  }
  #scr-lobby [data-ca-box="footer"] #btnReady{
    background:linear-gradient(#8fd97a,#4fae3c);
  }
  #scr-lobby [data-ca-box="footer"] .ca-btn-compact:active{
    transform:translateY(3px);box-shadow:0 1px 0 rgb(6 24 52 / .3);
  }



}

/* 세로 화면에서 채팅이 쓸데없이 길어 보이던 것 정리 */
@media (orientation:portrait) and (max-width:1023px){
  #scr-lobby .chat-log{max-height:20vh}



}

/* ============================================================
   가로 채팅 서랍 : 화면이 더 낮은 실제 기기에서도 잘리지 않게
   내용이 넘치면 서랍 안에서 스크롤한다.
   ============================================================ */
@media (orientation:landscape) and (max-height:600px){
  /* 서랍은 넘치지 않게 맞춰 넣는다.
     채팅이 남는 높이를 먹되 부족하면 로그가 먼저 줄어든다.
     (예전엔 채팅이 안 줄어들어 빠른 대사 줄이 화면 밖으로 밀렸다) */
  body.touchmode #scr-game .ca-game-sidebar{
    overflow:hidden;overscroll-behavior:contain;
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-chat{
    flex:1 1 auto}
  body.touchmode #scr-game .ca-game-sidebar .chat-log{
    flex:1 1 auto;overflow-y:auto}



}

/* ---- 가로 서랍 채팅 마무리 ----
   · 리액션 버튼이 채팅 판 밖으로 밀려 있었다 -> 입력칸 위로 올린다
   · 입력칸과 보내기 버튼 높이가 서로 달라 어긋나 보였다 -> 같게 맞춘다 */
@media (orientation:landscape) and (max-height:600px){
  body.touchmode #scr-game .ca-game-sidebar .ca-chat{
    display:flex;flex-direction:column;gap:6px}
    body.touchmode #scr-game .ca-game-sidebar .chat-log{flex:1 1 auto}
  /* 입력칸과 보내기 버튼을 같은 높이로 */
  body.touchmode #scr-game .ca-game-sidebar .ca-chat__composer{
    flex:0 0 auto;
    display:grid;gap:6px;padding:0}
  body.touchmode #scr-game .ca-game-sidebar .ca-chat__input{padding:0 12px;font-size:13px}
  body.touchmode #scr-game .ca-game-sidebar .ca-send{padding:0;
    display:grid;place-items:center}



}

/* ---- 가로 서랍 : 잘려 보이지 않게 ----
   fixed + inset:0 은 iOS 에서 주소창이 가린 영역까지 포함한 큰 화면을 기준으로 잡는다.
   그래서 아래쪽(입력칸)이 주소창 밑으로 들어가 잘린 것처럼 보였다.
   실제로 보이는 높이(100dvh)로 잡고, 그래도 넘치면 서랍 안에서 스크롤한다. */
@media (orientation:landscape) and (max-height:600px){
  body.touchmode #scr-game .ca-game-sidebar{
    top:0;right:0;bottom:auto;left:auto;
    height:100dvh;max-height:100dvh;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }
  body.touchmode #scr-game .ca-game-sidebar .ca-roster{flex:0 0 auto}
  body.touchmode #scr-game .ca-game-sidebar .ca-chat{flex:0 0 auto}
  body.touchmode #scr-game .ca-game-sidebar .chat-log{
    flex:0 0 auto;overflow-y:auto}
  /* 아래가 잘린 느낌이 나지 않게 마지막 칸 뒤에 여유를 둔다 */
  body.touchmode #scr-game .ca-game-sidebar::after{
    content:"";display:block;flex:0 0 auto;height:2px;
  }



}

/* 360px 처럼 아주 낮은 가로 화면에서도 스크롤 없이 다 들어가게 조인다. */
@media (orientation:landscape) and (max-height:420px){
  body.touchmode #scr-game .ca-game-sidebar{gap:6px;padding-top:6px}
  body.touchmode #scr-game .ca-game-sidebar .ca-roster{padding:6px;gap:5px}
  body.touchmode #scr-game .ca-game-sidebar .ca-status{font-size:8px;padding:1px 6px}
  body.touchmode #scr-game .ca-game-sidebar .ca-chat{padding:6px;gap:5px}



}

/* ============================================================
   모바일 가로 조작부 — 전달받은 그림으로 교체
   (조이스틱 판/노브 · 폭탄 · 보조 아이템)

   그림에 테두리·그림자·화살표가 이미 들어 있으므로
   CSS 로 그리던 원·테두리·삼각형은 전부 끈다. 겹치면 지저분해진다.
   ============================================================ */
@media (orientation:landscape) and (max-height:600px){
  /* --- 조이스틱 판 --- */
  /* 맵 위에 떠도 뒤가 비치도록 반투명. 대기 중엔 더 옅게, 잡는 동안만 진해진다. */
  body.touchmode #scr-game .stick{opacity:.38}
  body.touchmode #scr-game .stick.active{opacity:.6}
  body.touchmode #scr-game .stick-base{
    background:url("/assets/ui/pad/stick-base.png") center / 100% 100% no-repeat!important;
    border:0!important;box-shadow:none!important;border-radius:0!important;
  }
  body.touchmode #scr-game .stick.active .stick-base{box-shadow:none!important}
  /* 화살표는 그림에 들어 있다 */
  body.touchmode #scr-game .stick-dir{display:none!important}

  /* --- 노브 --- */
  body.touchmode #scr-game .stick-knob{
    background:url("/assets/ui/pad/stick-knob.png") center / 100% 100% no-repeat!important;
    border:0!important;box-shadow:none!important;border-radius:0!important;
  }
  body.touchmode #scr-game .stick.active .stick-knob{
    background:url("/assets/ui/pad/stick-knob.png") center / 100% 100% no-repeat!important;
    filter:brightness(1.06) saturate(1.15);
  }
  body.touchmode #scr-game .stick-knob::after{content:none!important}

  /* --- 폭탄 버튼 --- */
  body.touchmode #scr-game .acts .act-bomb{
    background:url("/assets/ui/pad/bomb.png") center / 100% 100% no-repeat!important;
    border:0!important;box-shadow:none!important;
    font-size:0!important;color:transparent!important;
  }
  /* --- 보조(투척) 버튼 --- */
  body.touchmode #scr-game .acts .act-throw{
    background:url("/assets/ui/pad/item.png") center / 100% 100% no-repeat!important;
    border:0!important;box-shadow:none!important;
    font-size:0!important;color:transparent!important;
  }
  body.touchmode #scr-game .acts .act-throw i{display:none!important}
  /* 아이템이 없으면 흐리게 (기존 규칙 유지) */
  body.touchmode #scr-game .acts .act-throw[aria-disabled="true"]{
    opacity:.4;filter:grayscale(.7);
  }
  /* 누를 때 눌리는 느낌만 남긴다 */
  body.touchmode #scr-game .touch button{box-shadow:none!important}
  body.touchmode #scr-game .touch button:active{
    transform:translateY(3px) scale(.97);box-shadow:none!important;
    filter:brightness(1.07);
  }



}

/* ============================================================
   폰에서 두 번 두드리면 화면이 확대돼 게임을 못 하던 문제

   iOS 는 user-scalable=no 를 무시하므로 메타 태그만으로는 안 막힌다.
   touch-action:manipulation 이 "두 번 두드려 확대"만 정확히 꺼 준다.
   (한 번 누르기·스크롤은 그대로 되고, 빠른 연타도 막지 않는다 —
    봉인 탈출 버튼처럼 두드려야 하는 것이 있어서 연타는 살려야 한다)
   ============================================================ */
html,
body{
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
button,
[role="button"],
.char-opt,
.seg button,
.ca-mapseg button{
  touch-action:manipulation;
}
/* 보드와 조이스틱은 손가락 동작을 전부 우리가 처리한다 */
#cv,
.stick-zone,
.touch,
.mash-escape{
  touch-action:none;
}