/* 게임장 · D&D 오토체스 (templates/arcade/autochess.html). 틀은 arcade.css, 여기는 게임 칸만 */
/* 패널: 게임 칸이 폭 전부(두 줄 배치 860px 이상), 랭킹 · 내 기록은 그 아래 한 장 (다른 게임은 오른쪽 칸) */
.arcade .acx-panel { display: flex; flex-direction: column; gap: var(--sp-5); }
/* 아래 카드: 넓은 화면은 칸 안을 둘로 나눠 세로로 길어지지 않게
   랭킹 = 왼쪽 기간 · 주간 보상 · 내 순위 | 오른쪽 순위 목록, 내 기록 = 왼쪽 기간 · 숫자 | 오른쪽 난이도별 · 최근 랭크전 */
@media (min-width: 769px) {
  .acx-below .ac-pane:not([hidden]) { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: var(--sp-8); align-content: start; }
  #ac-pane-rank > * { grid-column: 1; }
  #ac-pane-rank > .acx-rankbox { grid-column: 2; grid-row: 1 / span 4; }
  #ac-pane-rank .ac-rank { margin-top: 0; }
  #ac-pane-me > .ac-seg { grid-column: 1; grid-row: 1; }
  #ac-pane-me > .ac-stats { grid-column: 1; grid-row: 2 / span 3; align-self: start; }
  #ac-pane-me > :not(.ac-seg):not(.ac-stats) { grid-column: 2; }
  #ac-pane-me > .ac-h4:first-of-type { margin-top: 0; }
  .acx-below .ac-pane.ac-logpane:not([hidden]) { display: block; }
}
.arcade .acx-play { display: flex; flex-direction: column; gap: var(--sp-4); }
.arcade .ac-picon img:not([hidden]) + .uicon { display: none; } /* 장착한 아이콘이 있으면 첫 글자 동그라미는 숨김 (goblin-crash.css 와 같음, 이 화면은 그 css 를 안 읽어서 둘 다 보였음) */
.acx-desc { margin-top: var(--sp-1); font-size: var(--fs-sm); line-height: var(--lh-loose); }
/* 기본(폰 · 스크립트 전): 게임이 자기 안에서 스크롤하도록 화면 높이만큼 (헤더 · 여백 빼고). 너무 낮은 창에서는 640 */
.acx-stage { scroll-margin-top: calc(var(--header-h) + var(--sp-2)); height: max(640px, calc(100svh - 120px)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #15171d; }
.acx-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.acx-stage.is-auto { height: auto; } /* PC: autochess.js 가 iframe 을 게임 길이만큼 늘림 */
/* 불러오는 동안(템플릿 is-loading, autochess.js reveal 이 뗌): 게임은 가리고 가운데 '불러오는 중'만.
   게임 파일 앞쪽 빈 틀이 먼저 그려졌다가 채워지고, 다 뜬 뒤 전장 폭 · 칸 높이 · 탭 칸이 바뀌는 게 그대로 보였음.
   스크립트가 안 돌아도 8초 뒤에는 게임이 보이게 (acxShow · acxHide) */
.acx-stage.is-loading iframe { visibility: hidden; animation: acxShow 0s 8s forwards; }
.acx-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--sp-3); color: var(--text-sub); font-size: var(--fs-sm); pointer-events: none; }
.acx-loading p { margin: 0; }
.acx-stage.is-loading .acx-loading { animation: acxHide 0s 8s forwards; }
.acx-stage:not(.is-loading) .acx-loading { display: none; }
@keyframes acxShow { to { visibility: visible; } }
@keyframes acxHide { to { visibility: hidden; } }
/* 내 기록 > 최근 랭크전: 한 줄 = 난이도 | 몇 라운드 · 클리어 | 점수 */
.acx-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.acx-recent li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--fs-sm); color: var(--text-sub); }
.acx-recent li.ac-empty { display: block; color: var(--muted); }
.acx-recent .d { padding: 2px var(--sp-2); border-radius: 999px; background: var(--surface-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text); }
.acx-recent b { font-variant-numeric: tabular-nums; color: var(--text-strong); }
.acx-recent b small { margin-left: 2px; font-size: var(--fs-2xs); color: var(--muted); }
.acx-recent li.is-clear { border-color: var(--accent-line); }
.acx-recent li.is-clear .w { color: var(--gold); font-weight: var(--fw-semibold); }
@media (max-width: 768px) {
  /* 폰: 카드 여백 없이 화면 양끝까지, 높이는 헤더만 빼고 */
  .arcade .acx-play { padding: 0; background: none; border: 0; box-shadow: none; }
  .acx-play > div:first-child { padding-inline: var(--sp-1); }
  .acx-stage { height: calc(100svh - var(--header-h)); margin-inline: calc(var(--sp-4) * -1); border-inline: 0; border-radius: 0; } /* autochess.js 가 실제 머리 높이로 다시 맞춤 */
  /* 게임 막대([☰ 게임] · ⓘ)는 이 화면 폰에서만 따라오지 않게: 게임 칸이 머리 바로 밑을 차지하는데 막대가 그 위를 덮어 체력 · 골드 줄이 가려졌음 (10-20 막대가 불투명해지며 완전히 안 보임). 위로 올리면 그대로 있음 */
  .ar-shell .ar-side { position: relative; top: auto; }
  #dnd2chat { display: none; } /* 채팅 동그라미가 게임 안 '전투 시작' 버튼을 가렸음 → 이 화면 폰에서만 숨김 */
  /* 게임 안을 굴리다 끝에 닿아 사이트 화면이 조금 밀려도(위 크레딧 줄이 살짝 보이는 등) 게임 칸 맨 위로 다시 붙음. 크게 올리면 그대로 위로 감 */
  html.acx-snap { scroll-snap-type: y proximity; }   /* autochess.js 가 붙임 (html:has 는 문서 전체를 자주 다시 계산해서 뺌) */
  .acx-stage, .site-header { scroll-snap-align: start; }   /* 맨 위(머리 · 크레딧 줄)도 붙는 자리: 없으면 위로 올려도 게임 칸으로 도로 끌려가 크레딧 줄을 볼 수 없었음 */
}

/* 전체 화면 (js/autochess.js, 게임 안 소리 옆 아이콘으로 켜고 끔): 게임 칸을 화면에 꽉 채우고 사이트 머리글 · 폰 아래 메뉴 · 채팅을 가림 */
.acx-stage { position: relative; }
.acx-stage.is-full { position: fixed !important; inset: 0; z-index: var(--z-fullscreen); width: 100vw; height: 100vh !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
@supports (height: 100dvh) { .acx-stage.is-full { height: 100dvh !important; } }
.acx-stage.is-full iframe { height: 100% !important; }
.acx-full-on, .acx-full-on body { overflow: hidden; }
.acx-full-on #dnd2chat { display: none; }
/* 조상에 backdrop-filter · transform 이 있으면 fixed 가 화면 대신 그 칸 기준이 되어 꽉 차지 않음 */
.acx-full-on .glass, .acx-full-on .panel, .acx-full-on main, .acx-full-on .arcade { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; filter: none !important; contain: none !important; }

/* 넓은 화면(1200 이상): 다른 게임처럼 오른쪽 칸에 랭킹 · 내 기록 · 로그 (예전엔 게임 아래 가로 한 장이라 랭킹이 첫 화면에 없었음).
   게임 칸은 두 줄 배치가 640 부터라(게임 파일) 오른쪽 칸 320 을 빼도 두 줄로 들어감. 아래 카드용 칸 나누기는 풀어 세로 한 줄로 */
@media (min-width: 1200px) {
  .arcade .acx-panel { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .arcade .acx-below { position: sticky; top: calc(var(--header-h) + var(--sp-3)); }
  .acx-below .ac-pane:not([hidden]) { display: block; }
  .acx-play { padding: var(--sp-4); }
}
/* 오른쪽 랭킹 칸 접기 · 펴기 (arcade-common.js sideFold, 다른 게임 .grid2 와 같은 모양): 오른쪽 칸이 있는 넓은 화면만 */
.arcade .acx-panel .ac-fold { display: none; }
@media (min-width: 1200px) {
  .arcade .acx-panel .ac-fold { display: inline-flex; }
  .arcade .acx-panel.is-side-closed { grid-template-columns: minmax(0, 1fr) 40px; }
  .arcade .acx-panel.is-side-closed > :last-child > :not(.ac-fold) { display: none; }
  .arcade .acx-panel.is-side-closed .ac-fold { align-self: stretch; flex-direction: column; justify-content: flex-start; gap: var(--sp-2); height: auto; min-height: 120px; padding: var(--sp-3) 0; }
  .arcade .acx-panel.is-side-closed .ac-fold svg { order: -1; transform: rotate(180deg); }
  .arcade .acx-panel.is-side-closed .ac-fold__txt { writing-mode: vertical-rl; letter-spacing: .1em; }
}
/* 오토체스 화면만: 머리말(INSERT COIN · 소개 글)을 줄여 게임 칸을 위로 → 전장이 창 높이에 맞춰 덜 작아짐 (autochess.js fit). 소개 글은 (i) 게임 설명 창에 있음 */
@media (min-width: 1200px) {
  .arcade .ar-top { margin-bottom: var(--sp-4); align-items: center; }
  .arcade .ar-top .ar-big { font-size: 48px; }
  .arcade .ar-top .page-title { margin-top: 0; }   /* 소개 글은 10-21 사용자 요청으로 다시 보임 (예전엔 여기서 숨겼음) */
  .arcade .ar-top .wallet .me__sub { display: none; }
}
/* 랭킹 아래 게임 탭 칸 (autochess.js tabsOut): 랭킹 칸과 같은 카드, 안쪽은 게임 모양 그대로. 오른쪽 열은 따라다니지 않게(길어져서) */
.acx-tabs { padding: var(--sp-2); overflow: hidden; --acx-tabs-h: 520px; }
.acx-tabs[hidden] { display: none; }
@media (min-width: 1200px) {
  /* 게임이 뜨기 전(is-pending, autochess.js reveal 이 뗌): 자리만 잡아 둠 → 다 뜬 뒤 칸이 생기며 오른쪽 열이 갑자기 길어지지 않게.
     높이는 게임이 기억한 탭 따라: 시너지 · 기록은 처음엔 한두 줄(약 128), 조합 · 아이템 · 도움말은 칸 끝까지(is-tall, autochess.js).
     dnd2.css 의 [hidden] 이 !important 라 여기도 !important. 랭킹 칸을 접어 둔 때(is-side-closed)는 잡지 않음.
     스크립트가 안 돌아 떼지 못해도 8초 뒤에는 빈 칸이 사라지게 (acxGone, 게임 가림막과 같은 때) */
  .acx-panel:not(.is-side-closed) .acx-tabs.is-pending[hidden] { display: block !important; height: 128px; animation: acxGone 0s 8s forwards; }
  .acx-panel:not(.is-side-closed) .acx-tabs.is-pending.is-tall[hidden] { height: var(--acx-tabs-h); }   /* 실제로는 510~537 (탭 따라) */
  @keyframes acxGone { to { height: 0; padding: 0; border-width: 0; visibility: hidden; } }
  .arcade .acx-below { position: static; display: flex; flex-direction: column; gap: var(--sp-4); }
}