/* CraftX 게임 모바일 공통 스타일 */

/* 캔버스를 화면에 맞게 축소 (확대는 하지 않음) */
@media (max-width: 900px) {
  canvas {
    max-width: 100vw !important;
    height: auto !important;
    image-rendering: pixelated;
  }
  body {
    overflow: auto !important;
    height: auto !important;
    min-height: 100vh;
    padding-bottom: 240px; /* 컨트롤 가림 방지 */
  }
  .game-wrapper,
  .main-layout {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .side-column,
  .side-panel {
    width: 100% !important;
    max-width: 480px;
  }
}

/* 온스크린 컨트롤 (모바일 전용) */
#mc-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  z-index: 9999;
  pointer-events: none; /* 자식만 인터랙션 */
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

@media (max-width: 900px), (pointer: coarse) {
  #mc-controls.mc-active { display: flex; }
}

/* 좌우 두 개만 쓰는 게임(Blocks2D·Star Squadron·Alien War)은 화면 크기와
 * 무관하게 보입니다.
 *
 * 위 규칙은 폭 900px 이하이거나 손가락 입력일 때만 켭니다. 그래서 터치가
 * 되는 노트북이나 가로로 돌려 900px 을 넘긴 화면에서는 버튼이 사라졌습니다.
 * 창을 좁히면 나타나고 넓히면 없어지는 동작이라 원인을 짐작하기 어렵습니다.
 *
 * 버튼이 두 개뿐이라 넓은 화면에서도 자리를 거의 쓰지 않습니다.
 * (표시는 mobile-controls.js 의 ALWAYS_ON) */
html.mc-always #mc-controls.mc-active { display: flex; }

/* 넓은 화면에는 mc-fit(한 화면에 담기)이 걸리지 않습니다. 그래서 조작부가
 * 화면 아래에 그냥 얹혀 캔버스 밑단과 키 안내문을 덮었습니다. 덮는 높이만큼
 * 자리를 비웁니다. mc-fit 이 걸린 화면은 이미 제 방식으로 비우므로 뺍니다. */
html.mc-always:not(.mc-fit) body {
  box-sizing: border-box;
  padding-bottom: 96px;
}

/* Snake Bite — 넓은 화면에서도 스크롤 없이 담기.
 *
 * 아래쪽 mc-fit 블록은 통째로 @media (max-width: 900px), (pointer: coarse)
 * 안에 있어 넓은 화면에는 걸리지 않습니다. 그래서 세로가 넉넉하지 않은
 * 창에서는 600×600 캔버스와 점수판이 화면을 넘겨 스크롤해야 했습니다.
 *
 * 여기서는 캔버스 높이만 조입니다. max-height 는 '자연 크기보다 클 때만'
 * 작동하므로, 세로가 넉넉한 화면에서는 원래 600 그대로 두고 낮은 창에서만
 * 줄어듭니다. mc-fit 을 쓰지 않는 이유는 그 처리가 캔버스 밖 요소를 위아래
 * 로 쌓인 것으로 보고 높이에서 빼는데, 넓은 화면의 스네이크는 점수판이 옆에
 * 붙는 가로 배치라 캔버스만 필요 없이 쪼그라들기 때문입니다.
 * 좁은 화면·터치 기기는 아래 mc-fit 블록이 같은 캔버스에 같은 세기로 다시
 * 값을 걸어 이 규칙을 덮습니다(선택자 특정도가 같아 나중에 적힌 쪽이 이깁니다).
 * 그쪽이 조작부 높이까지 빼 주므로 좁은 화면에서는 그 계산이 맞습니다.
 *
 * width/height 를 auto 로 풀어야 브라우저가 원래 비율(600×600)을 지키면서
 * 줄여 줍니다. 높이를 직접 주면 눌려 찌그러집니다. snakeBite/style.css 가
 * 걸어 둔 값을 덮어야 해서 !important 가 필요합니다.
 * 190px 은 점수판·안내문 등 캔버스 위아래가 쓰는 높이입니다. */
html.mc-game-snake canvas:not(#next-canvas):not(#hud-canvas) {
  width: auto !important;
  height: auto !important;
  max-width: 100vw !important;
  max-height: calc(100dvh - 190px) !important;
}

#mc-controls * { pointer-events: auto; }

.mc-dpad {
  display: grid;
  grid-template-columns: 56px 56px 56px;
  grid-template-rows: 56px 56px 56px;
  gap: 6px;
}

.mc-actions {
  display: grid;
  grid-template-columns: 72px 72px;
  grid-template-rows: 56px;
  gap: 10px;
  align-content: end;
}

.mc-btn {
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  font-family: inherit;
  border-radius: 12px;
  background: linear-gradient(180deg, #4a5670 0%, #2a3142 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 -2px 0 rgba(0,0,0,0.35) inset,
    0 4px 8px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.05s ease;
  -webkit-tap-highlight-color: transparent;
}
.mc-btn:active,
.mc-btn.mc-pressed {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 1px 2px rgba(0,0,0,0.5);
  background: linear-gradient(180deg, #323a4e 0%, #1c2230 100%);
}

.mc-btn.mc-up    { grid-column: 2; grid-row: 1; }
.mc-btn.mc-left  { grid-column: 1; grid-row: 2; }
.mc-btn.mc-right { grid-column: 3; grid-row: 2; }
.mc-btn.mc-down  { grid-column: 2; grid-row: 3; }

/* 십자의 빈 아래 모서리 — 옆걸음(A·D) 자리.
 * 회전(◀▶)은 가운데 줄에 있으므로, 옆으로 미끄러지는 조작은 한 줄 아래에
 * 두어 손가락이 헷갈리지 않게 합니다. */
.mc-btn.mc-corner-l { grid-column: 1; grid-row: 3; font-size: 15px; }
.mc-btn.mc-corner-r { grid-column: 3; grid-row: 3; font-size: 15px; }

/* 액션이 셋 이상일 때 두 줄로 쌓는 배치 */
.mc-actions.mc-actions-stack {
  grid-template-rows: 46px 56px;
}
.mc-btn.mc-wide  { grid-column: span 2; }
.mc-btn.mc-label { font-size: 13px; }

/* 한 줄 방향키 (mc-dpad-row)
 *
 * 십자 배치는 3칸 × 3칸을 차지해 세로로 높습니다. 화면이 좁은 스마트폰에서는
 * 그만큼 게임 화면을 덜어내므로, 가로로 눕히는 편이 나은 게임이 있습니다.
 * (Blocks2D·Star Squadron 처럼 좌우 이동이 중심인 게임)
 *
 * 좌우를 양 끝에 두고 상하를 가운데에 모읍니다. 엄지가 닿기 쉬운 바깥쪽에
 * 가장 자주 쓰는 키가 오게 하려는 배치입니다.
 *
 * 조작부(#mc-controls)는 원래 좁은 화면·터치 기기에서만 나타나므로
 * (위 @media 규칙) 이 배치도 자연히 그 경우에만 보입니다.
 */
.mc-dpad.mc-dpad-row {
  display: flex;
  gap: 6px;
}

.mc-dpad.mc-dpad-row .mc-btn {
  width: 56px;
  height: 56px;
  /* 십자 배치용 좌표를 지웁니다. 남겨두면 flex 안에서도 계속 따라옵니다. */
  grid-column: auto;
  grid-row: auto;
}

.mc-dpad.mc-dpad-row .mc-left  { order: 1; }
.mc-dpad.mc-dpad-row .mc-up    { order: 2; }
.mc-dpad.mc-dpad-row .mc-down  { order: 3; }
.mc-dpad.mc-dpad-row .mc-right { order: 4; }

/* 좌우 두 개만 달릴 때 (opts.lr)
 * 버튼이 둘뿐이라 자리에 여유가 있습니다. 조금 키우고 사이를 벌려
 * 엄지로 정확히 짚히게 합니다. */
.mc-dpad.mc-dpad-row:not(:has(.mc-up)) .mc-btn {
  width: 68px;
  height: 60px;
}

/* 네 개를 한 줄로 늘어놓으면 가로가 좁은 기기에서 액션 버튼과 부딪힙니다. */
@media (max-width: 420px) {
  .mc-dpad.mc-dpad-row { gap: 4px; }
  .mc-dpad.mc-dpad-row .mc-btn {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────
 * 한 화면에 담기 (html.mc-fit)
 *
 * 맨 위 @media 블록은 세로로 길어지는 것을 허용합니다 — body 에
 * overflow:auto 와 padding-bottom:240px 을 주고, 캔버스는 가로 폭에만
 * 맞춥니다(max-width:100vw). 그래서 세로로 긴 게임은 화면 밖으로 넘칩니다.
 * Blocks2D(300×600)은 폭 400px 기기에서 높이가 800px 이 되어, 점수판과
 * 조작부까지 더하면 스크롤 없이는 볼 수 없었습니다.
 *
 * mc-fit 은 반대로 세로도 화면 안에 가둡니다. 캔버스를 '남은 높이' 에
 * 맞춰 줄이고, 스크롤을 막습니다. 게임 중에 손가락이 미끄러져 화면이
 * 밀려버리는 일도 함께 사라집니다.
 *
 * 캔버스는 width/height 를 auto 로 두고 max-* 로만 조입니다. 이렇게 하면
 * 브라우저가 원래 비율(width/height 속성)을 지키면서 두 한계 안으로
 * 줄여 줍니다. 높이를 직접 지정하면 그림이 눌려 찌그러집니다.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 900px), (pointer: coarse) {

  html.mc-fit {
    /* 조작부가 가리는 높이. 캔버스는 이만큼 비켜서야 버튼에 덮이지 않습니다. */
    --mc-bar: calc(72px + env(safe-area-inset-bottom, 0px));
    /* 점수판·안내문 등 캔버스 밖 요소가 쓰는 높이 (게임별로 아래에서 조정) */
    --mc-chrome: 64px;
  }

  html.mc-fit,
  html.mc-fit body {
    /* !important 가 붙어 있어야 합니다.
     * 이 파일 위쪽의 기본 모바일 규칙과 게임별 CSS(예: snakeBite/style.css)가
     * 세로로 길어지는 것을 허용하려고 body { height: auto !important } 를
     * 쓰고 있어서, 그냥 두면 그쪽이 이겨 화면 밖으로 넘칩니다. */
    height: 100vh !important;
    height: 100dvh !important;   /* 주소창이 접혔다 펴져도 실제 보이는 높이 */
    min-height: 0 !important;
    overflow: hidden !important;
    /* 아래에서 body 에 padding-bottom 을 주므로 반드시 테두리 기준이어야
     * 합니다. 게임마다 자체 리셋(* { box-sizing })이 있기도 없기도 해서,
     * 없는 쪽(Snake Bite)에서는 body 높이가 100dvh + 72px 이 되어
     * 그만큼 화면 밖으로 밀렸습니다. */
    box-sizing: border-box !important;
  }

  /* body 아래쪽을 조작부만큼 비워, 가운데 정렬이 버튼 위에서 이뤄지게 합니다.
   * 위아래 여백은 게임별 CSS 가 스크롤을 전제로 크게 잡아 둔 값(예:
   * padding: 64px 8px 260px)을 덮어써야 합니다. */
  html.mc-fit body {
    padding-top: 0 !important;
    padding-bottom: var(--mc-bar) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html.mc-fit .game-wrapper,
  html.mc-fit #gameArea {
    max-height: 100%;
    gap: 6px !important;
  }

  /* 캔버스 id 가 게임마다 다르고(#game-canvas, #game …), 옛 모바일 규칙이
   * '아래 컨트롤 240px' 을 가정한 max-height 를 !important 로 걸어 둔
   * 곳도 있습니다(snakeBite/style.css). 가로로 눕히면 그 계산이 음수에
   * 가까워져 캔버스가 15px 로 쪼그라들었습니다. 여기서 실제 조작부
   * 높이(--mc-bar, JS 가 재서 넣습니다) 기준으로 다시 잡습니다.
   * 미리보기 캔버스(#next-canvas)는 게임 화면이 아니라 제외합니다. */
  html.mc-fit #game-canvas,
  html.mc-fit canvas:not(#next-canvas):not(#hud-canvas) {
    width: auto !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: calc(100dvh - var(--mc-bar) - var(--mc-chrome)) !important;
  }

  /* ── Blocks2D ──────────────────────────────────────────────
   * 점수판이 세로로 쌓이면 캔버스가 쓸 높이를 그만큼 빼앗깁니다.
   * 가로 한 줄로 눕히고, 키보드 조작 안내는 터치 기기에서 쓸모가 없어
   * 감춥니다. */
  html.mc-fit.mc-game-blocks2d .side-panel {
    width: 100% !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: 8px !important;
  }
  html.mc-fit.mc-game-blocks2d .panel-box { padding: 4px 8px !important; }
  html.mc-fit.mc-game-blocks2d .panel-box h3 {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }
  html.mc-fit.mc-game-blocks2d .panel-box .value { font-size: 15px !important; }
  html.mc-fit.mc-game-blocks2d #next-canvas { width: 52px; height: 42px; }
  html.mc-fit.mc-game-blocks2d .controls { display: none !important; }

  /* ── 갤러거 ────────────────────────────────────────────────
   * HUD 한 줄이 480px 로 고정되어 있어 좁은 화면에서 가로로 넘칩니다. */
  html.mc-fit.mc-game-starsquadron { --mc-chrome: 52px; }
  html.mc-fit.mc-game-starsquadron .hud {
    width: auto !important;
    gap: 18px !important;
    font-size: 12px !important;
  }
  html.mc-fit.mc-game-starsquadron .hud .label { font-size: 10px !important; }
  html.mc-fit.mc-game-starsquadron .controls-info { display: none !important; }

  /* ── Alien War ─────────────────────────────────────────────
   * HUD 한 줄(SCORE·HI·STAGE·LIVES)이 간격 32px 로 벌어져 있어 좁은
   * 화면에서 가로로 넘칩니다. 간격과 글자를 줄이고, 키보드 안내문은
   * 터치 기기에서 쓸모가 없어 감춥니다. */
  html.mc-fit.mc-game-alienwar { --mc-chrome: 44px; }
  html.mc-fit.mc-game-alienwar .hud {
    gap: 14px !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
  }
  html.mc-fit.mc-game-alienwar .hud .label { font-size: 9px !important; margin-right: 3px !important; }
  html.mc-fit.mc-game-alienwar .controls-info { display: none !important; }

  /* ── Tank Battle ───────────────────────────────────────────
   * 점수판 항목이 다섯이라(SCORE·HI·STAGE·ENEMIES·LIVES) 간격 그대로면
   * 가로 488px 이 되어 화면 밖으로 나갑니다. 줄여서 한 줄에 담습니다. */
  html.mc-fit.mc-game-tank { --mc-chrome: 76px; }
  html.mc-fit.mc-game-tank .hud {
    max-width: 100vw !important;
    gap: 8px !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }
  html.mc-fit.mc-game-tank .hud .label { font-size: 9px !important; margin-right: 2px !important; }
  html.mc-fit.mc-game-tank .controls-info { display: none !important; }

  /* ── Tank Command ──────────────────────────────────────────
   * 점수판 항목이 여섯입니다(SCORE·HI·STAGE·ENEMIES·적 성향·LIVES).
   * 폭 360px 에서는 한 줄에 못 들어가 두세 줄로 접히면서 83px 을 먹었고,
   * 그만큼 캔버스가 311px 로 줄었습니다. Tank Battle 과 같은 방식으로
   * 줄여 한 줄에 담고, 키보드 안내문은 터치 기기에서 쓸모가 없어 감춥니다. */
  html.mc-fit.mc-game-tank_ai { --mc-chrome: 46px; }
  html.mc-fit.mc-game-tank_ai .hud {
    max-width: 100vw !important;
    gap: 7px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }
  html.mc-fit.mc-game-tank_ai .hud .label { font-size: 9px !important; margin-right: 2px !important; }
  html.mc-fit.mc-game-tank_ai .controls-info { display: none !important; }

  /* ── Snake Bite ────────────────────────────────────────────
   * 캔버스가 화면 세로의 절반(290px)밖에 쓰지 못했습니다. 캔버스 밖
   * 요소가 그만큼 자리를 차지했기 때문입니다 — 순위표 119px, 키보드
   * 안내 32px, 제목 29px.
   *
   * 순위표는 놀는 동안 볼 것이 아니고 게임 목록 화면에도 같은 표가
   * 있습니다. 폰에서는 접어 두고 화면을 게임에 줍니다. 키보드 안내는
   * 터치 기기에서 쓸모가 없고, 제목은 줄여서 남깁니다. */
  html.mc-fit.mc-game-snake { --mc-chrome: 84px; }
  html.mc-fit.mc-game-snake .side-column { display: none !important; }
  html.mc-fit.mc-game-snake .info { display: none !important; }
  html.mc-fit.mc-game-snake h1 {
    font-size: 15px !important;
    margin: 0 !important;
    letter-spacing: 1px !important;
  }
  html.mc-fit.mc-game-snake .score-board { font-size: 12px !important; }

  /* ── Bunker 3D ─────────────────────────────────────────────
   * 4:3 캔버스라 가로가 먼저 차고 세로가 남습니다. 남는 자리를 안내문이
   * 차지하지 않도록 안내문만 접습니다. */
  html.mc-fit.mc-game-bunker3d .controls-info { display: none !important; }

  /* 점수판이 가로로 넘치는 것은 게임마다 반복되는 문제라 공통으로도
   * 한 번 막아 둡니다. 넘치면 줄바꿈해서라도 화면 안에 둡니다. */
  html.mc-fit .hud {
    max-width: 100vw;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────
 * 가로로 눕힌 폰 (세로가 480px 이하)
 *
 * 세로 공간이 조작부와 점수판만으로도 거의 다 찹니다. 그대로 두면
 * 게임 화면이 손톱만 해집니다(스네이크가 39px 까지 줄었습니다).
 * 없어도 게임이 되는 것 — 순위표, 조작 안내문 — 을 접어 그 자리를
 * 게임에 돌려줍니다. 세로로 다시 세우면 그대로 돌아옵니다.
 * ───────────────────────────────────────────────────────────── */
@media (max-height: 480px) {

  html.mc-fit { --mc-chrome: 26px; }

  html.mc-fit .leaderboard,
  html.mc-fit .info,
  html.mc-fit .controls-info,
  html.mc-fit .controls {
    display: none !important;
  }

  /* 가로로 눕히면 화면 높이가 360px 안팎입니다. 십자 버튼이 세로로 176px
   * (56x3 + 간격)을 먹어 캔버스에 남는 자리가 거의 없었습니다 — 탱크가
   * 102px 로 쪼그라들었습니다. 버튼을 줄이고 조작부 여백도 함께 줄입니다.
   * 손가락이 닿는 크기(40px)는 지킵니다. */
  .mc-dpad {
    grid-template-columns: 40px 40px 40px;
    grid-template-rows: 40px 40px 40px;
    gap: 4px;
  }
  .mc-dpad.mc-dpad-row { grid-template-rows: 40px; }
  .mc-btn { font-size: 16px; border-radius: 9px; }
  .mc-btn.mc-small { width: 56px; height: 34px; font-size: 12px; }
  #mc-controls {
    padding: 6px 10px calc(env(safe-area-inset-bottom, 0px) + 6px);
    gap: 8px;
  }
  html.mc-fit { --mc-bar: calc(48px + env(safe-area-inset-bottom, 0px)); }
}

.mc-btn.mc-a { background: linear-gradient(180deg, #e85a68 0%, #c82333 100%); }
.mc-btn.mc-b { background: linear-gradient(180deg, #f4b740 0%, #c87a00 100%); }
.mc-btn.mc-a:active, .mc-btn.mc-a.mc-pressed { background: linear-gradient(180deg, #c82333 0%, #8e1a22 100%); }
.mc-btn.mc-b:active, .mc-btn.mc-b.mc-pressed { background: linear-gradient(180deg, #c87a00 0%, #8c5500 100%); }

.mc-btn.mc-small {
  width: 72px;
  height: 44px;
  font-size: 14px;
  border-radius: 10px;
}

.mc-row-top {
  position: fixed;
  right: 12px;
  top: 12px;
  display: none;
  gap: 8px;
  z-index: 9999;
}
@media (max-width: 900px), (pointer: coarse) {
  .mc-row-top.mc-active { display: flex; }
}