/* ============================================================
   CRYPTO ARCADE — 대기실 · 게임 화면 레이아웃
   출처: crypto-arcade-game-ui-kit / styles/game-ui-layout.css + LAYOUT-SPEC.md
   버튼·아이콘은 crypto-arcade-ui-kit(ui-kit.css)을 그대로 재사용한다.

   원본에서 바꾼 곳 (이유)
   1) html,body{overflow:hidden} 대신 화면별로 처리 —
      이 프로젝트의 .screen 은 position:absolute;inset:0 이라 문서 스크롤이 원래 없다.
      body 를 잠그면 모바일 타이틀 화면이 스크롤 불가가 된다.
   2) .ca-game-screen{min-width:960px} 제거 — 휴대폰에서 가로 스크롤이 생긴다.
      대신 데스크톱 레이아웃 전체를 min-width:1024px 로 감쌌다.
   3) 맵 캔버스에 width/height:100% 를 강제하되 object-fit:contain 을 함께 준다.
      보드는 15×13(600×520)이라 정사각 프레임에 늘려 넣으면 비율이 왜곡된다.
      프레임은 정사각, 캔버스는 그 안에서 레터박스된다.
   4) 프레임 크기를 calc(100dvh - 124px) 대신 height:100% + aspect-ratio 로 잡았다.
      HUD 높이가 화면마다 달라 고정 픽셀 차감은 어긋난다.
   ============================================================ */

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

:root{
  --cag-navy:#102d5a;
  --cag-border:#f0d7aa;
  --cag-gap:clamp(10px,1vw,16px);
  --cag-sidebar:clamp(300px,25vw,390px);
  --cag-shadow:0 10px 0 rgb(67 85 113 / .16),0 18px 36px rgb(61 91 116 / .18);
}

/* 공통 표면 */
.ca-surface{
  border:3px solid rgb(240 215 170 / .96);
  border-radius:22px;
  background:linear-gradient(180deg,rgb(255 253 246 / .98),rgb(255 247 229 / .98));
  box-shadow:inset 0 2px 0 #fff,var(--cag-shadow);
}
.ca-panel{
  border:2px solid var(--cag-border);
  border-radius:18px;
  background:rgb(255 252 242 / .92);
  box-shadow:inset 0 2px 0 #fff;
}
.ca-panel__title{
  margin:0 0 10px;font:900 15px/1 var(--kit-font,sans-serif);
  color:var(--cag-navy);text-align:center;
}
.ca-panel__title em{font-style:normal;font-size:11px;font-weight:700;opacity:.55}

/* ------------------------------------------------------------
   여기부터 데스크톱(가로 1024px 이상) 전용 레이아웃.
   그 아래 폭은 기존 모바일 레이아웃이 그대로 살아 있다.
   ------------------------------------------------------------ */
@media (min-width:1024px){

  /* 화면 자체가 스크롤되지 않게 잠근다 (문서 스크롤은 원래 없음) */
  #scr-lobby,#scr-game{overflow:hidden;padding:0}

  /* ============ 공통 셸 ============ */
  .ca-game-screen,
  #scr-lobby .ca-waiting-shell{
    box-sizing:border-box;
    font-family:var(--kit-font,system-ui,sans-serif);
    color:var(--cag-navy);
  }

  .ca-game-screen{
    width:100%;height:100%;margin:0;
    padding:clamp(10px,1.5vh,18px);
    overflow:hidden;
  }
  .ca-game-shell{
    display:grid;
    grid-template-rows:clamp(66px,8vh,82px) minmax(0,1fr);
    gap:var(--cag-gap);
    width:min(1800px,100%);height:100%;margin:0 auto;
    min-height:0;
  }

  /* ============ HUD ============ */
  #scr-game .ca-hud{
    display:grid;
    grid-template-columns:minmax(300px,1fr) auto minmax(300px,1fr);
    align-items:center;gap:16px;
    min-width:0;padding:6px 14px;
    text-align:left;
  }
  .ca-hud__players,.ca-hud__inventory{
    display:flex;align-items:center;gap:8px;min-width:0;
    flex-wrap:nowrap;overflow:hidden;
  }
  .ca-hud__inventory{justify-content:flex-end}
  .ca-hud__center{display:grid;justify-items:center;gap:2px}
  .ca-hud__mode{
    font:900 11px/1 var(--kit-font,sans-serif);
    letter-spacing:.16em;color:#b07a1e;
  }
  .ca-hud__block{display:none}          /* 블록 해시류 개발 문구는 노출하지 않는다 */

  /* HUD 플레이어 칩 */
  #scr-game .ca-hud .pcard{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;gap:7px;
    min-width:0;height:50px;
    padding:4px 10px 4px 5px;
    border:2px solid var(--chip,#b8a4e9);
    border-radius:14px;
    background:color-mix(in srgb,var(--chip,#b8a4e9) 11%,#fffdf6);
    box-shadow:inset 0 2px 0 #fff,0 4px 0 rgb(16 45 90 / .14);
    color:var(--cag-navy);font-family:var(--kit-font,sans-serif);
    filter:none;opacity:1;
  }
  #scr-game .ca-hud .pcard--btc {--chip:#ff9a24}
  #scr-game .ca-hud .pcard--eth {--chip:#45b8e8}
  #scr-game .ca-hud .pcard--sol {--chip:#a978f5}
  #scr-game .ca-hud .pcard--doge{--chip:#7fcb49}
  #scr-game .ca-hud .pcard canvas{width:38px;height:38px;display:block}
  /* 태그(dot)는 2열 격자에서 셋째 자식이라 칩 아래로 삐져나온다.
     데스크톱은 테두리색+아바타로 캐릭터가 이미 구분되므로 숨긴다. */
  #scr-game .ca-hud .pcard .dot{display:none}
  #scr-game .ca-hud .pcard .pc-txt{min-width:0;display:grid;gap:2px}
  #scr-game .ca-hud .pcard .pc-nm{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:12.5px;font-weight:900;
  }
  #scr-game .ca-hud .pcard .st{
    font-size:10px;font-weight:800;color:#4a6076;opacity:.8;
    letter-spacing:0;font-family:var(--kit-font,sans-serif);
  }
  #scr-game .ca-hud .pcard .st::before{
    content:"";display:inline-block;width:7px;height:7px;margin-right:5px;
    border-radius:50%;background:#5cc46a;vertical-align:1px;
  }
  #scr-game .ca-hud .pcard.sealed{--chip:#8fa2b8;box-shadow:inset 0 2px 0 #fff,0 4px 0 rgb(16 45 90 / .14)}
  #scr-game .ca-hud .pcard.sealed .st::before{background:#5aa8d8}
  #scr-game .ca-hud .pcard.dead{filter:grayscale(.85);opacity:.55}
  #scr-game .ca-hud .pcard.dead .st::before{background:#9aa3b3}

  /* 타이머 */
  #scr-game .ca-timer{
    display:grid;place-items:center;
    min-width:140px;min-height:52px;padding:2px 22px 4px;
    color:#fff;border:3px solid #0a2149;border-radius:999px;
    background:linear-gradient(#294a78,#132c57);
    box-shadow:inset 0 3px 0 rgb(255 255 255 / .18),0 5px 0 rgb(7 25 55 / .28);
    font:950 28px/1 var(--kit-font,sans-serif);letter-spacing:.08em;
  }
  #scr-game .ca-timer.warn{color:#ffd76a}
  #scr-game .ca-timer.danger{color:#ff9d93}

  /* 인벤토리 카운터 */
  #scr-game .ca-hud__inventory .stat-chips{
    display:flex;gap:7px;flex-wrap:nowrap;justify-content:flex-end;
  }
  #scr-game .ca-hud__inventory .chip{
    display:inline-flex;align-items:center;gap:6px;
    min-height:40px;padding:0 12px;
    color:#fff;border:2px solid #091f47;border-radius:11px;
    background:linear-gradient(#27466f,#102a56);
    box-shadow:inset 0 2px 0 rgb(255 255 255 / .13),0 4px 0 rgb(6 24 52 / .22);
    font:900 12px/1 var(--kit-font,sans-serif);white-space:nowrap;
  }
  #scr-game .ca-hud__inventory .chip canvas{width:22px;height:22px}
  #scr-game .ca-hud__inventory .chip .lb{
    font:800 9px/1 var(--kit-font,sans-serif);letter-spacing:.1em;color:#9db0cd;
  }

  /* 채팅 드로어 버튼 — 넓은 화면에서는 숨는다 */
  .ca-drawer-toggle{display:none}

  /* ============ 전투 레이아웃 : 맵 왼쪽 · 사이드바 오른쪽 ============ */
  .ca-battle-layout{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--cag-sidebar);
    gap:var(--cag-gap);
    min-width:0;min-height:0;
  }

  #scr-game .ca-map-stage{
    position:relative;
    display:grid;place-items:center;
    width:auto;max-width:none;
    min-width:0;min-height:0;overflow:hidden;padding:0;
  }

  /* 프레임은 정사각. 높이를 먼저 채우고 폭이 넘치면 폭 기준으로 되돌린다. */
  .ca-map-frame{
    box-sizing:border-box;
    height:100%;max-width:100%;
    aspect-ratio:1 / 1;
    padding:clamp(8px,1.1vh,14px);
    overflow:hidden;
    border:6px solid #b5bed1;border-radius:30px;
    background:linear-gradient(145deg,#eef3fb,#d4ddeb);
    box-shadow:inset 0 3px 0 #fff,0 9px 0 #8796b0,0 18px 36px rgb(53 73 101 / .22);
  }
  /* 보드는 15×13 이라 정사각 프레임에 '늘려' 넣으면 왜곡된다.
     contain 으로 비율을 지키며 레터박스한다. */
  .ca-map-frame #cv{
    display:block;
    width:100% !important;height:100% !important;
    max-width:none !important;max-height:none !important;
    object-fit:contain;
    border-radius:16px;
    box-shadow:none;
  }

  /* ============ 사이드바 ============ */
  .ca-game-sidebar{
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr);
    gap:10px;min-width:0;min-height:0;padding:10px;
  }
  .ca-room-summary,.ca-roster,#scr-game .ca-chat{
    min-width:0;
    border:2px solid var(--cag-border);border-radius:18px;
    background:rgb(255 252 242 / .9);
    box-shadow:inset 0 2px 0 #fff;
  }
  .ca-room-summary{
    display:flex;align-items:center;gap:10px;padding:10px 12px;
  }
  .ca-room-summary__body{flex:1;min-width:0}
  .ca-room-summary__label{margin:0;font:800 11px/1 var(--kit-font,sans-serif);color:#7d8ea3}
  .ca-room-summary__mode{margin:5px 0 0;font:900 15px/1 var(--kit-font,sans-serif);letter-spacing:.06em}
  .ca-room-summary__code{margin:5px 0 0;font:700 11px/1 var(--kit-font,sans-serif);color:#7d8ea3}
  .ca-room-summary__code b{font-family:var(--ca-mono,monospace);letter-spacing:.16em;color:var(--cag-navy)}
  .ca-room-summary .ca-button{width:auto;min-width:84px}

  /* 플레이어 목록 */
  .ca-roster{padding:9px 10px}
  .ca-roster__head{
    display:grid;grid-template-columns:minmax(0,1fr) 62px 30px;
    gap:8px;padding:0 8px 7px;
    font:800 11px/1 var(--kit-font,sans-serif);color:#8194a8;
  }
  .ca-roster__head span:not(:first-child){text-align:center}
  .ca-roster__row{
    display:grid;grid-template-columns:36px minmax(0,1fr) 62px 30px;
    align-items:center;gap:8px;
    min-height:46px;padding:3px 8px;
    border:2px solid transparent;border-radius:13px;
  }
  .ca-roster__row + .ca-roster__row{margin-top:4px}
  .ca-roster__row canvas{width:34px;height:34px;display:block}
  .ca-roster__nm{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font:900 13px/1 var(--kit-font,sans-serif);
  }
  .ca-roster__ko{text-align:center;font:900 13px/1 var(--kit-font,sans-serif);color:#5a6d80}
  .ca-roster__row--btc {background:#fff5e6;border-color:#f4d4a6}
  .ca-roster__row--eth {background:#eaf6fd;border-color:#a8dcf2}
  .ca-roster__row--sol {background:#f4edff;border-color:#cbb2f7}
  .ca-roster__row--doge{background:#f0f9e8;border-color:#b6de95}
  .ca-roster__row.is-current{box-shadow:0 0 0 2px #b996f5}
  .ca-roster__row.ca-status--liquidated{filter:grayscale(.8);opacity:.62}

  .ca-status{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:58px;min-height:26px;padding:0 9px;
    color:#fff;border-radius:999px;
    box-shadow:inset 0 2px 0 rgb(255 255 255 / .35),0 3px 0 rgb(16 45 90 / .18);
    font:900 11.5px/1 var(--kit-font,sans-serif);
  }
  .ca-status--alive,.ca-status--ready{background:linear-gradient(#99e65c,#55b924)}
  .ca-status--sealed{background:linear-gradient(#9ca6b2,#697583)}
  .ca-status--liquidated{background:linear-gradient(#ff8175,#da423e)}

  /* ============ 채팅 (사이드바 하단 고정) ============ */
  #scr-game .ca-chat{
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    min-height:0;padding:9px;width:auto;max-width:none;gap:0;
  }
  .ca-chat__header{
    padding:0 4px 7px;font:950 15px/1 var(--kit-font,sans-serif);
  }
  #scr-game .ca-chat__messages{
    min-height:0;height:auto;padding:9px;
    overflow-y:auto;overscroll-behavior:contain;
    border:1px solid #eadcc2;border-radius:13px;
    background:rgb(255 255 255 / .72);
    scrollbar-width:thin;
    font-size:12px;line-height:1.7;
  }
  .ca-chat__composer{
    display:grid;grid-template-columns:minmax(0,1fr) 46px;
    gap:8px;padding-top:8px;border:0;
  }
  .ca-chat__quick{display:flex;gap:5px;padding-top:8px;overflow-x:auto;scrollbar-width:thin}
  .ca-chat__quick button{
    flex:0 0 auto;min-height:32px;padding:0 10px;cursor:pointer;
    border:2px solid #ead9b9;border-radius:10px;background:#fffaf0;
    color:var(--cag-navy);font:800 11px/1 var(--kit-font,sans-serif);
  }
  .ca-chat__quick button:hover{background:#fff3dc}
  .ca-chat__quick button:active{transform:translateY(2px)}

  /* ============ 대기실 ============ */
  #scr-lobby{display:none}
  #scr-lobby.show{display:block}
  #scr-lobby .ca-waiting-shell{
    display:grid;
    grid-template-rows:clamp(58px,7vh,72px) minmax(0,1fr) clamp(62px,7vh,74px);
    width:min(1600px,calc(100% - 2*clamp(10px,1.5vh,18px)));
    height:calc(100% - 2*clamp(10px,1.5vh,18px));
    margin:clamp(10px,1.5vh,18px) auto;
    min-height:0;overflow:hidden;max-width:none;
    padding:0;background:linear-gradient(180deg,rgb(255 253 246 / .98),rgb(255 247 229 / .98));
  }
  .ca-waiting-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:0 18px;border:0;border-bottom:2px solid #f0dcb6;
    border-radius:0;background:none;
  }
  .ca-waiting-title{
    display:flex;align-items:center;gap:10px;margin:0;
    font:900 24px/1 var(--kit-font,sans-serif);color:var(--cag-navy);
    text-shadow:none;letter-spacing:-.01em;
  }
  .ca-waiting-title__ic{width:30px;height:30px;object-fit:contain}
  .ca-room-pill{
    display:flex;align-items:center;gap:8px;
    padding:5px 6px 5px 16px;border:2px solid #0d2a56;border-radius:999px;
    background:linear-gradient(#27466f,#12294f);
  }
  .ca-room-code{
    font:900 19px/1 var(--ca-mono,monospace);letter-spacing:.26em;color:#ffd155;
    border:0;background:none;padding:0;
  }
  .ca-invite{
    border:2px solid rgb(255 255 255 / .85);border-radius:999px;cursor:pointer;
    background:linear-gradient(180deg,#79d4f5,#2f9eea);
    color:#fff;font:800 12px/1 var(--kit-font,sans-serif);padding:7px 15px;
    box-shadow:0 3px 0 #2172ad;
  }
  .ca-invite:hover{filter:brightness(1.05)}
  .ca-invite:active{transform:translateY(3px);box-shadow:none}

  .ca-waiting-layout{
    display:grid;
    grid-template-columns:minmax(0,1.85fr) minmax(300px,.9fr);
    gap:var(--cag-gap);
    min-width:0;min-height:0;padding:var(--cag-gap);
  }
  .ca-waiting-main{
    display:grid;grid-template-rows:minmax(0,1fr) clamp(78px,10vh,104px);
    gap:11px;min-width:0;min-height:0;
  }

  /* 2×2 플레이어 카드 — 4장을 세로로 쌓지 않는다 */
  #scr-lobby .ca-player-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:11px;min-height:0;align-content:stretch;
  }
  #scr-lobby .ca-player-grid .seat{
    position:relative;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    justify-items:center;align-content:center;
    gap:2px;min-width:0;min-height:0;
    padding:26px 10px 10px;overflow:hidden;
    border-width:3px;border-radius:22px;
    box-shadow:inset 0 2px 0 #fff,0 5px 0 rgb(120 130 160 / .16);
  }
  #scr-lobby .ca-player-grid .seat-face{
    width:auto;height:100%;max-height:112px;aspect-ratio:1/1;
  }
  #scr-lobby .ca-player-grid .seat-nm{font-size:16px}
  #scr-lobby .ca-player-grid .seat-badge{margin-top:5px}
  #scr-lobby .ca-player-grid .corner{top:9px}
  #scr-lobby .ca-player-grid .corner-l{left:9px}
  #scr-lobby .ca-player-grid .corner-r{right:9px}
  /* 내 카드에만 붙는 캐릭터 순환 버튼 */
  .ca-card-swap{
    position:absolute;right:9px;bottom:9px;
    width:38px;height:38px;padding:7px;border:0;cursor:pointer;
    background:transparent url("/assets/ui/buttons/button-icon-square-blue.png") center / 100% 100% no-repeat;
  }
  .ca-card-swap img{width:100%;height:100%;object-fit:contain;pointer-events:none}
  .ca-card-swap:hover{filter:brightness(1.06)}
  .ca-card-swap:active{transform:translateY(3px)}

  /* 캐릭터 선택 : 한 줄 레일 */
  .ca-character-rail{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) 46px;
    align-items:center;gap:10px;
    min-height:0;padding:8px 12px;
    border:2px solid #ead3a9;border-radius:18px;
    background:rgb(255 250 236 / .92);
  }
  .ca-character-rail__label{
    font:900 12px/1.3 var(--kit-font,sans-serif);color:#7a6a4c;text-align:center;
  }
  .ca-character-rail__tiles{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;min-width:0;height:100%;
  }
  .ca-character-rail .char-opt{
    display:grid;grid-template-rows:minmax(0,1fr) auto;
    justify-items:center;align-content:center;gap:3px;   /* 캔버스와 이름표 사이 확실한 간격 */
    min-width:0;height:100%;padding:5px 4px 6px;          /* 이름표가 아래 테두리에 안 붙게 */
    border:2px solid #c8d9e5;border-radius:14px;background:#f7fbfb;
    cursor:pointer;overflow:hidden;
  }
  /* 캔버스를 이름표 자리만큼 줄여, 좁은 화면·확대에서도 글자와 안 겹치게 한다 */
  .ca-character-rail .char-opt canvas{width:auto;height:100%;max-height:42px;aspect-ratio:1/1}
  .ca-character-rail .char-opt .tg{font:900 9px/1 var(--ca-mono,monospace);letter-spacing:.08em;white-space:nowrap}
  .ca-character-rail .char-opt.on{
    border-color:#ff9a18;background:#fff3dc;box-shadow:inset 0 0 0 2px #fff;
  }
  .ca-character-rail .char-opt.is-taken{
    filter:grayscale(.7);opacity:.45;cursor:not-allowed;
  }
  .ca-rail-shuffle{
    width:46px;height:46px;padding:9px;border:0;cursor:pointer;
    background:transparent url("/assets/ui/buttons/button-icon-square-blue.png") center / 100% 100% no-repeat;
  }
  .ca-rail-shuffle img{width:100%;height:100%;object-fit:contain;pointer-events:none}
  .ca-rail-shuffle:active{transform:translateY(3px)}

  /* 오른쪽 : 설정 + 채팅 */
  .ca-waiting-side{
    display:grid;grid-template-rows:auto minmax(0,1fr);
    gap:11px;min-width:0;min-height:0;
  }
  #scr-lobby .ca-settings{padding:12px}
  #scr-lobby .ca-settings .set-row{
    display:grid;grid-template-columns:76px minmax(0,1fr);
    align-items:center;gap:8px;margin-bottom:8px;font-size:12px;
  }
  #scr-lobby .ca-settings .set-row:last-child{margin-bottom:0}
  .ca-segmented{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px;
  }
  #scr-lobby .ca-segmented button{
    min-height:34px;padding:0 4px;cursor:pointer;
    border:2px solid #e3d8c7;border-radius:10px;background:#fffdf8;
    color:var(--cag-navy);font:850 11.5px/1 var(--kit-font,sans-serif);
  }
  #scr-lobby .ca-segmented button.on{
    border-color:#ff9a18;
    background:linear-gradient(#ffd96a,#ffad24);
    color:#6b3e00;
    box-shadow:inset 0 2px 0 rgb(255 255 255 / .55),0 3px 0 #d8780e;
  }

  #scr-lobby .ca-chat{
    display:grid;grid-template-rows:auto minmax(0,1fr) auto;
    min-height:0;padding:10px;flex:none;
  }
  #scr-lobby .ca-chat__messages{
    min-height:0;padding:9px;overflow-y:auto;overscroll-behavior:contain;
    border:1px solid #eadcc2;border-radius:13px;
    background:rgb(255 255 255 / .72);scrollbar-width:thin;
    font-size:12.5px;line-height:1.7;
  }
  #scr-lobby .ca-chat__composer{border:0}

  /* 하단 액션 바 — 항상 화면 안 */
  .ca-waiting-footer{
    display:flex;align-items:center;gap:14px;
    padding:0 16px;border:0;border-top:2px solid #ead6b3;
    background:rgb(255 249 235 / .96);
  }
  .ca-waiting-footer__hint{
    font:700 12px/1.3 var(--kit-font,sans-serif);color:#7d8ea3;
    font-family:var(--kit-font,sans-serif);
  }
  /* 하단 바 버튼은 낮아야 한다. 키트 기본(min-height 84px)과 3열 그리드를 줄인다. */
  .ca-btn-compact{
    width:auto;min-width:110px;min-height:46px;padding:4px 16px;
    grid-template-columns:30px minmax(0,1fr) 18px;
  }
  .ca-btn-compact.ca-button--md{grid-template-columns:minmax(0,1fr)}
  .ca-btn-compact .ca-button__icon{width:28px;height:28px}
  .ca-btn-compact .ca-button__trail{width:18px;height:18px}
  .ca-btn-compact .ca-button__title{font-size:15px}
  .ca-waiting-footer__start.ca-btn-compact{
    width:min(300px,28vw);margin-left:auto;min-height:48px;
  }
  .ca-waiting-footer__start.ca-btn-compact .ca-button__title{font-size:17px}

  /* 전송 버튼 */
  .ca-send{
    width:46px;height:44px;padding:0;cursor:pointer;
    border:2px solid rgb(255 255 255 / .85);border-radius:14px;
    background:linear-gradient(180deg,#79d4f5,#2f9eea);
    color:#fff;font-size:16px;line-height:1;
    box-shadow:0 3px 0 #2172ad;
  }
  .ca-send:hover{filter:brightness(1.06)}
  .ca-send:active{transform:translateY(3px);box-shadow:none}
}

/* ------------------------------------------------------------
   좁은 PC (1024–1100px) : 채팅을 맵 아래로 내리지 않고 오른쪽 드로어로 연다
   ------------------------------------------------------------ */
@media (min-width:1024px) and (max-width:1180px){
  #scr-game .ca-hud{grid-template-columns:minmax(220px,1fr) auto minmax(200px,1fr);gap:8px;padding-inline:10px}
  #scr-game .ca-hud .pcard{grid-template-columns:32px minmax(0,1fr);height:44px}
  #scr-game .ca-hud .pcard canvas{width:32px;height:32px}
  #scr-game .ca-hud .pcard .st{display:none}
  #scr-game .ca-hud__inventory .chip .lb{display:none}

  .ca-battle-layout{grid-template-columns:minmax(0,1fr)}
  .ca-game-sidebar{
    position:absolute;z-index:20;inset:0 0 0 auto;
    width:min(360px,calc(100vw - 24px));
    transform:translateX(calc(100% + 28px));
    transition:transform 180ms ease;
  }
  .ca-game-sidebar.is-open{transform:translateX(0)}
  .ca-drawer-toggle{
    display:grid;place-items:center;
    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);
  }
  .ca-drawer-toggle:active{transform:translateY(3px);box-shadow:none}
  .ca-waiting-layout{grid-template-columns:minmax(0,1fr) 300px}
}

/* 세로가 낮은 노트북 (1366×768 등) */
@media (min-width:1024px) and (max-height:820px){
  :root{--cag-gap:8px}
  .ca-game-screen{padding:8px}
  .ca-game-shell{grid-template-rows:60px minmax(0,1fr)}
  #scr-game .ca-hud{padding-block:4px}
  #scr-game .ca-timer{min-height:44px;font-size:23px;min-width:120px}
  #scr-game .ca-hud .pcard{height:44px}
  #scr-game .ca-hud__inventory .chip{min-height:34px;padding:0 9px}
  #scr-lobby .ca-waiting-shell{grid-template-rows:56px minmax(0,1fr) 60px}
  .ca-waiting-main{grid-template-rows:minmax(0,1fr) 78px}
  .ca-character-rail{padding-block:6px}
  #scr-lobby .ca-player-grid .seat{padding-top:24px}
  #scr-lobby .ca-player-grid .seat-face{max-height:88px}
  .ca-waiting-title{font-size:20px}

  /* 낮은 높이(≈700px 노트북)에서 매치 설정 body(≈212px)에 5줄이 안 들어가
     맵 선택 줄이 패널 밖으로 34px 넘쳐 잘려 보이던 것.
     v3 !important·후순위 base 를 이기려면 #scr-lobby 특이도 + !important 가 필요하다.
     제일 높은 맵 썸네일 줄을 줄여 body 안에 다 들어가게 한다. */
  #scr-lobby .ca-settings .set-row{margin-bottom:4px !important}
  #scr-lobby .ca-segmented button{min-height:28px !important}
  #scr-lobby .ca-mapseg{gap:5px !important}
  #scr-lobby .ca-mapseg button{padding:2px 2px !important}
  #scr-lobby .ca-mapseg button canvas{max-width:34px !important}
  #scr-lobby .ca-mapseg button i{font-size:8px !important}
}

/* ------------------------------------------------------------
   모바일·태블릿(1024px 미만) : 기존 레이아웃을 그대로 쓴다.
   새로 감싼 래퍼가 흐름을 바꾸지 않도록 무력화한다.
   ------------------------------------------------------------ */
@media (max-width:1023px){
  .ca-game-shell{display:contents}
  .ca-battle-layout{display:contents}
  .ca-map-frame{display:contents}       /* 캔버스를 .stage 의 직계로 되돌린다 */
  .ca-game-sidebar{display:none}
  .ca-drawer-toggle{display:none}
  .ca-waiting-main{display:contents}
  .ca-character-rail{
    grid-column:1 / -1;
    display:grid;grid-template-columns:auto minmax(0,1fr) 44px;
    align-items:center;gap:8px;margin-top:10px;padding:8px 10px;
    border:2px solid #ead3a9;border-radius:16px;background:rgb(255 250 236 / .92);
  }
  .ca-character-rail__label{font:900 11px/1.3 var(--ca-sans,sans-serif);color:#7a6a4c;text-align:center}
  .ca-character-rail__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-width:0}
  .ca-character-rail .char-opt{
    display:grid;justify-items:center;gap:1px;padding:5px 2px;cursor:pointer;
    border:2px solid #c8d9e5;border-radius:12px;background:#f7fbfb;
  }
  .ca-character-rail .char-opt canvas{width:38px;height:38px}
  .ca-character-rail .char-opt .tg{font:900 8px/1 var(--ca-mono,monospace)}
  .ca-character-rail .char-opt.on{border-color:#ff9a18;background:#fff3dc}
  .ca-character-rail .char-opt.is-taken{filter:grayscale(.7);opacity:.45;cursor:not-allowed}
  .ca-rail-shuffle{
    width:44px;height:44px;padding:9px;border:0;cursor:pointer;
    background:transparent url("/assets/ui/buttons/button-icon-square-blue.png") center / 100% 100% no-repeat;
  }
  .ca-rail-shuffle img{width:100%;height:100%;object-fit:contain}
  .ca-room-summary,.ca-roster{display:none}
  .ca-chat__header,.ca-chat__quick{display:none}
  .ca-send{
    width:44px;height:40px;padding:0;cursor:pointer;flex:0 0 44px;
    border:2px solid rgb(255 255 255 / .85);border-radius:12px;
    background:linear-gradient(180deg,#79d4f5,#2f9eea);color:#fff;
  }
  #scr-lobby .chat-in{display:flex;gap:6px;align-items:center;padding:6px}
  #scr-lobby .chat-in .ca-chat__input{flex:1;min-width:0}
  .ca-card-swap{display:none}
  .ca-waiting-title__ic{width:22px;height:22px;object-fit:contain;vertical-align:-4px}
}

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

/* ============================================================
   아이템 도감 — 맵에 나오는 그림 그대로 + 한글 설명
   ============================================================ */
.ca-guide{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;
  padding:16px;
  background:rgb(16 45 90 / .55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.ca-guide[hidden]{display:none}
.ca-guide__card{
  display:grid;grid-template-rows:auto minmax(0,1fr);
  width:min(880px,100%);max-height:min(86vh,760px);
  border:3px solid #0d2a56;border-radius:24px;
  background:linear-gradient(180deg,#fffdf6,#fff7e9);
  box-shadow:0 24px 60px rgb(0 0 0 / .35);
  overflow:hidden;
}
.ca-guide__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:2px solid #ecd9b4;
  background:linear-gradient(#27466f,#12294f);
}
.ca-guide__head h3{margin:0;color:#fff;font:900 18px/1 var(--kit-font,sans-serif)}
.ca-guide__close{
  width:34px;height:34px;padding:0;cursor:pointer;
  border:2px solid rgb(255 255 255 / .7);border-radius:10px;
  background:rgb(255 255 255 / .12);color:#fff;font-size:15px;line-height:1;
}
.ca-guide__close:hover{background:rgb(255 255 255 / .24)}
.ca-guide__body{padding:14px 16px 18px;overflow-y:auto;overscroll-behavior:contain}
.ca-guide__label{
  margin:0 0 8px;font:900 13px/1 var(--kit-font,sans-serif);
  padding-left:9px;border-left:4px solid currentColor;
}
.ca-guide__label.good{color:#2f8f3f}
.ca-guide__label.bad{color:#d0453f;margin-top:18px}
.ca-guide__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:9px;
}
.ca-guide__item{
  display:grid;grid-template-columns:52px minmax(0,1fr);
  align-items:center;gap:9px;
  padding:8px 10px;
  border:2px solid #dbe7c9;border-radius:14px;background:#f7fcf1;
}
.ca-guide__item.bad{border-color:#f3ccc9;background:#fef4f3}
.ca-guide__ic{display:block;flex:0 0 auto}
.ca-guide__tx{min-width:0;display:grid;gap:2px}
.ca-guide__tx b{font:900 14px/1.2 var(--kit-font,sans-serif);color:#15325e}
.ca-guide__tx i{font:700 12px/1.3 var(--kit-font,sans-serif);font-style:normal;color:#4a6076}
.ca-guide__tx em{
  font:700 10px/1 var(--ca-mono,monospace);font-style:normal;
  color:#8d9cae;letter-spacing:.06em;
}

/* 도감 열기 버튼 */
.ca-guide-open{
  cursor:pointer;white-space:nowrap;
  border:2px solid #0d2a56;border-radius:12px;
  background:linear-gradient(#3f7fbf,#255b96);
  color:#fff;font:800 12px/1 var(--kit-font,sans-serif);
  padding:9px 13px;box-shadow:0 3px 0 rgb(6 24 52 / .3);
}
.ca-guide-open:hover{filter:brightness(1.07)}
.ca-guide-open:active{transform:translateY(3px);box-shadow:none}
.ca-room-summary__acts{display:flex;align-items:center;gap:7px}
.ca-guide-open--lobby{width:100%;margin-top:8px;min-height:38px}

@media (max-width:1023px){
  .ca-guide__grid{grid-template-columns:1fr}
  .ca-guide__card{max-height:88vh}
  .ca-guide-open--lobby{margin-top:8px}
}

/* ============================================================
   맵 선택 (4테마)
   ============================================================ */
.ca-mapseg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ca-mapseg button{
  display:grid;justify-items:center;gap:3px;
  padding:5px 3px;cursor:pointer;min-width:0;
  border:2px solid #e3d8c7;border-radius:12px;background:#fffdf8;
}
.ca-mapseg button canvas{
  width:100%;height:auto;aspect-ratio:1/1;max-width:52px;
  display:block;border-radius:7px;
  background:#eef4ec;
}
.ca-mapseg button i{
  font:800 9px/1.2 var(--kit-font,sans-serif);font-style:normal;
  color:#6d7d8f;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.ca-mapseg button.on{
  border-color:#ff9a18;background:#fff3dc;
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .55),0 3px 0 #d8780e;
}
.ca-mapseg button.on i{color:#8a5200}
.ca-mapseg button:active{transform:translateY(2px)}
.set-row--maps{align-items:start!important}
.set-row--maps > span{padding-top:16px}

@media (max-width:1023px){
  .ca-mapseg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .ca-mapseg button{padding:4px 2px;border:2px solid #e3d8c7;border-radius:10px;background:#fffdf8}
  .ca-mapseg button canvas{width:100%;height:auto;aspect-ratio:1/1;max-width:42px;display:block;border-radius:6px}
  .ca-mapseg button i{font:800 8px/1.2 var(--ca-sans,sans-serif);font-style:normal;color:#6d7d8f}
  .ca-mapseg button.on{border-color:#ff9a18;background:#fff3dc}
}

/* 도감 : 표제어를 크립토 이름으로 바꾸면서 원작 이름은 괄호로 보이게 한다 */
.ca-guide__tx em::before{content:"원작 "}
.ca-guide__tx em:empty{display:none}