/*
 * 게임 초기 화면(메뉴·결과 패널) 공용 크롬.
 *
 * 52종이 각자 CSS 를 들고 있어 같은 역할의 요소가 게임마다 다르게 보였다 —
 * 시작 버튼만 해도 padding 9~14px, radius 7/8/12, font-weight 400/700 로 갈렸다.
 * 여기서는 **형태·간격·터치 영역만** 맞춘다. 배경 액센트와 제목 색은 게임의 정체성이라
 * 건드리지 않는다(그래서 color/background 는 지정하지 않는다).
 *
 * 게임 자신의 <style> 뒤에 로드해야 이긴다 — 주입 위치는 </style> 직후.
 * 컨테이너 관용구가 둘이라(`.panel` 47종 / `#menu` 만 쓰는 2종) 양쪽을 다 겨냥한다.
 */

/*
 * 초기 화면 배치 순서 — 게임마다 갈리던 것을 하나로 못 박는다.
 *
 * 실측하니 50종이 16가지 서로 다른 순서를 쓰고 있었다. 그중 제일 어색한 건 강화 상점이
 * **시작 버튼 뒤**에 오는 11종 — 먼저 시작하고 나서 강화를 사라는 순서가 된다. 이어하기 코드도
 * 시작 앞/뒤/랭킹 뒤로 제각각이었다.
 *
 * flex 자식의 order 만 바꾸므로 DOM 도 게임 코드도 건드리지 않는다. 분류되지 않은 요소는
 * 4번(가운데)에 남겨 게임 고유의 줄(상점 행·상태 표시 등)이 원래 자리를 지키게 한다.
 * 메뉴가 flex 가 아닌 게임에서는 아무 일도 일어나지 않는다 — 그대로 두면 된다.
 */
#menu,
#startPanel {
  --menu-ordered: 1;
}

#menu > *,
#startPanel > * {
  order: 4;
}

#menu > h1,
#startPanel > h1 {
  order: 1;
}

#menu > p,
#startPanel > p {
  order: 2;
}

/* 강화 상점은 시작보다 앞 — 사고 나서 시작하는 흐름 */
#menu > #gameMeta,
#startPanel > #gameMeta {
  order: 3;
}

#menu > #saveStatus,
#startPanel > #saveStatus {
  order: 5;
}

/* 이어하기 코드 줄은 입력을 감싼 행이라 :has 로 잡는다 */
#menu > :has(#codeInput),
#startPanel > :has(#codeInput),
#menu > #codeShow,
#startPanel > #codeShow {
  order: 6;
}

#menu > :has(#startBtn),
#startPanel > :has(#startBtn),
#menu > #startBtn,
#startPanel > #startBtn {
  order: 7;
}

/* 랭킹은 항상 맨 아래 */
#menu > #rankPanel,
#startPanel > #rankPanel {
  order: 8;
}

/* 제목·본문 — 모바일에서 줄바꿈이 자연스러운 크기로 */
.panel h1,
#menu h1 {
  font-size: 25px;
  line-height: 1.25;
  margin: 0 0 2px;
}

.panel p,
#menu p {
  font-size: 12.5px;
  line-height: 1.75;
  max-width: 520px;
  margin: 0;
}

/* 버튼 — 44px 은 모바일 최소 터치 영역. 게임마다 9~14px 이던 padding 을 하나로. */
.panel button,
#menu button {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
}

/* 보조 버튼은 자기 배경을 갖고 있다 — 형태만 맞춘다 */
.panel button.ghost,
#menu button.ghost {
  font-weight: 600;
}

/* 랭킹 패널·이어하기 코드 줄 안의 작은 버튼은 예외 — 본문 흐름을 밀지 않아야 한다 */
#rankPanel button,
.row button.mini {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 6px;
}

.row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

/* 이어하기 코드 입력 — 세이브가 있는 게임 17종이 같은 모양이 되도록 */
#codeInput {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 8px;
  font-family: inherit;
  letter-spacing: 1px;
  text-align: center;
}

#saveStatus,
#codeShow {
  font-size: 11px;
  line-height: 1.6;
}

/*
 * 로그인 사용자에게는 코드 줄을 감춘다 — 클래스는 lib/auth.js 가 단다.
 *
 * 코드는 계속 발급되지만 회원의 이어하기 수단은 로그인 그 자체다. 입력칸을 남겨두면
 * 남의 코드를 넣어 자기 계정 화면의 진행도를 갈아끼우는 길만 열린다.
 * 게임 18종이 코드 UI 를 각자 그렸고 마크업이 `#codeInput` 을 감싼 행 하나로 같아,
 * JS 로 18곳을 지우는 대신 여기서 한 규칙으로 잡는다.
 */
.game-signed-in #codeShow,
.game-signed-in #codeInput,
.game-signed-in :has(> #codeInput) {
  display: none;
}

/* 좁은 화면에서는 코드 줄이 두 줄로 접히므로 입력이 폭을 다 쓰게 둔다 */
@media (max-width: 420px) {
  #codeInput {
    flex: 1 1 100%;
  }

  .panel button,
#menu button {
    padding: 10px 16px;
  }
}