/*
  한 대의 기기를 여럿이 같이 보는 화면이다.
  기준 기기는 갤럭시 Z 폴드4 펼친 가로 (약 1104x884 CSS px, 거의 1.25:1).
  - 스크롤 없음. 항상 한 화면에 들어간다.
  - 글자는 팔 길이 밖에서도 읽히게 크게.
  - 넓어지면 좌우 전면 분할, 접힌 커버 화면(약 344px)에서는 위아래로 쌓는다.
*/

:root {
  --bg: #12101a;
  --bg-soft: #1c1930;
  --text: #f2f0ff;
  --muted: #9a94b8;
  --a: #ff4d6d;
  --b: #4d9dff;
  --ok: #47d18b;
  --error: #ff7a6b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;           /* 같이 보는 화면이라 실수로 스크롤되면 안 된다 */
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255, 77, 109, 0.18), transparent 60%),
    radial-gradient(1200px 600px at 85% 110%, rgba(77, 157, 255, 0.18), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.stage {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
}

/* --- 머리말 --- */
.intro { text-align: center; }

h1 {
  margin: 0;
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--a), var(--b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  color: var(--muted);
}

/* --- A vs B --- */
.versus {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.side {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.25rem;
  background: var(--bg-soft);
  color: var(--text);
  font: inherit;
  padding: 1.5rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, opacity 0.15s ease;
}

.side:active { transform: scale(0.98); }

.label {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.125rem;
  color: #12101a;
}

.side-a .label { background: var(--a); }
.side-b .label { background: var(--b); }

.text {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.side-a.picked { border-color: var(--a); box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.25); }
.side-b.picked { border-color: var(--b); box-shadow: 0 0 0 3px rgba(77, 157, 255, 0.25); }

/* 하나를 고르면 나머지는 물러난다 — 멀리서도 결과가 한눈에 */
body.has-pick .side:not(.picked) { opacity: 0.4; }

.vs {
  justify-self: center;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* --- 상태 --- */
.status { text-align: center; }

.soon {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.health {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.health::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--muted);
  vertical-align: 0.05em;
}

.health[data-state="ok"]::before { background: var(--ok); }
.health[data-state="error"]::before { background: var(--error); }

.debug {
  position: fixed;
  left: 50%;
  bottom: 0.25rem;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.6875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   폴드 펼친 화면 / 태블릿: 좌우 전면 분할
   가로 약 1104px, 세로 약 884px. 펼친 세로(884x1104)에서도 같은 레이아웃.
   --------------------------------------------------------------- */
@media (min-width: 45rem) {
  .stage {
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
    justify-content: stretch;
  }

  /* 제목은 분할 화면 위에 얹는다 — 자리를 뺏지 않게 */
  .intro {
    position: absolute;
    top: max(1.5rem, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    width: 100%;
  }

  h1 { font-size: 2.25rem; }

  .tagline {
    margin-top: 0.25rem;
    font-size: 0.9375rem;
  }

  .versus {
    flex: 1;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: relative;
    min-height: 0;
  }

  .side {
    border: none;
    border-radius: 0;
    background: transparent;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* 위아래로 제목·상태표시가 얹히므로 그만큼 비워둔다.
       위아래를 같게 둬야 선택지가 화면 한가운데로 온다. */
    padding: 7rem 2.5rem;
    gap: 1.75rem;
  }

  .side-a { background: linear-gradient(160deg, rgba(255, 77, 109, 0.16), transparent 70%); }
  .side-b { background: linear-gradient(200deg, rgba(77, 157, 255, 0.16), transparent 70%); }

  .side:active { transform: none; }

  /* 가운데 경계선 */
  .side-b { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.1); }

  .label {
    width: 4rem;
    height: 4rem;
    font-size: 1.75rem;
  }

  /* 여럿이 같이 보는 거리에서 읽혀야 한다 */
  .text {
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    line-height: 1.15;
    max-width: 9em;
  }

  .side-a.picked,
  .side-b.picked {
    box-shadow: none;
  }

  .side-a.picked { background: linear-gradient(160deg, rgba(255, 77, 109, 0.38), rgba(255, 77, 109, 0.08) 75%); }
  .side-b.picked {
    background: linear-gradient(200deg, rgba(77, 157, 255, 0.38), rgba(77, 157, 255, 0.08) 75%);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.1);
  }

  body.has-pick .side:not(.picked) { opacity: 0.35; }

  /* VS 배지는 두 면 경계 한가운데 */
  .vs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 4.5rem;
    height: 4.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 1.125rem;
    color: var(--text);
    pointer-events: none;
  }

  .status {
    position: absolute;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    width: 100%;
  }
}

/* 접힌 커버 화면(약 344px)처럼 좁고 낮을 때는 여백을 줄인다 */
@media (max-height: 40rem) and (max-width: 45rem) {
  .stage { gap: 1.25rem; }
  .side { padding: 1.125rem 1rem; }
  h1 { font-size: 1.75rem; }
}