/* 3종 달리기 — 가로 아케이드(640×360). 캔버스 1장 + 오버레이 구조. */
:root {
  --bg: #12203a;
  --ink: #eaf4ff;
  --dim: #9fb6d4;
  --accent: #ffb03c;
  --sea: #2ad0c4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font: 700 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07101f;
  background-image: radial-gradient(120% 90% at 50% 10%, #23456f 0%, #142744 45%, #060d18 100%);
}

/* ARCADE-FIT: 가로 게임(640×360). 폰 가로에서는 화면 전체,
   데스크톱에서는 아래 미디어쿼리가 **가로 폰 프레임**으로 줄인다. */
#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

main { position: absolute; inset: 0; }

#stage {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  /* 남는 좌우·위아래 띠는 app.js 가 배경을 더 그려 메운다(검은 띠 금지). */
}

.overlay {
  /* ⚠️ fixed 금지 — #app(폰 프레임) 밖으로 새어 나간다. */
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .7rem;
  background: rgba(6, 13, 24, .78);
}
.overlay[hidden] { display: none; }

/* ⚠️ #home 이 DOM 에서 마지막이라 같은 z-index 면 **홈이 장비/결과 시트 위에 그려진다**.
   실제로 장비 시트 위로 홈 제목·스킨 칩이 겹쳐 보였고, 구매 버튼 클릭이 홈에 먹혀
   장비가 안 사졌다(코인 900 그대로). 시트류를 홈보다 위로 올린다. */
#result, #gear, #guide { z-index: 20; }

/* ⚠️ 가로 무대는 높이가 360 뿐이다 — 세로판 치수를 그대로 두면 시트가 화면보다 커진다.
   넓게·낮게 잡는다. */
.sheet {
  width: 100%;
  max-width: 30rem;
  max-height: 100%;
  overflow-y: auto;
  background: linear-gradient(180deg, #2c4368, #172a45);
  border-radius: 1.1rem;
  padding: .9rem 1.1rem;
  box-shadow: inset 0 2px 0 rgba(210, 235, 255, .16), 0 1rem 2rem rgba(0, 0, 0, .55);
}

.sheet h1 { font-size: 1.1rem; margin-bottom: .6rem; color: var(--ink); }

.sheet button {
  /* ⚠️ 이 규칙(0,1,1)이 `.skin-chip`(0,1,0)을 이겨서 스킨 칩 12개가 화면 폭짜리 주황 막대가
     됐고, 홈 오른쪽 단이 프레임 밖으로 밀려 "탭하여 시작"이 안 눌렸다. 작은 버튼들은
     **부모를 붙여**(`.home-sheet .tab-btn` = 0,2,0) 이 규칙을 넘긴다 — :not 사슬로 빼면
     이번엔 `.gold`(0,2,1)가 밀려서 광고 버튼이 초록이 아니라 주황이 된다(실제로 그랬다). */
  width: 100%;
  padding: .55rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd28a, var(--accent));
  color: #40230a;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 #c8791c;
  margin-top: .45rem;
}
.sheet button.gold {
  background: linear-gradient(180deg, #b9f7c6, #4fd47a);
  color: #10391f;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -3px 0 #2ea253;
  animation: goldPulse 1.2s ease-in-out infinite;
}
.sheet button[hidden] { display: none; }
@keyframes goldPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

/* ── 결과창 — 가로 2단 ───────────────────────────────────── */
.result-sheet { display: flex; gap: 1rem; align-items: center; text-align: center; }
.res-left { flex: 0 0 6.5rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.res-right { flex: 1; min-width: 0; }
#result-hero { width: 4.6rem; height: auto; filter: drop-shadow(0 .4rem .4rem rgba(0, 0, 0, .5)); }
.result-sheet h1 {
  font-size: 1.6rem;
  line-height: 1.05;
  margin-bottom: .25rem;
  color: #ffe6b0;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}

/* rewards.webp(트로피·메달·상자)를 가로 3등분해 쓴다. */
.badge {
  width: 3.4rem;
  height: 3.4rem;
  background-image: url("../assets/rewards.webp");
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 0% 50%;
}
.badge[data-i="1"] { background-position: 50% 50%; }
.badge[data-i="2"] { background-position: 100% 50%; }

.stars { font-size: 1.3rem; letter-spacing: .2rem; color: #ffd75e; min-height: 1.5rem; }

#result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
  background: rgba(0, 0, 0, .28);
  border-radius: .8rem;
  padding: .45rem;
  margin: .35rem 0;
}
.res-cell { line-height: 1.15; }
.res-num { font-size: 1.05rem; font-weight: 900; color: #fff; }
.res-cap { font-size: .66rem; font-weight: 700; letter-spacing: .06em; color: var(--dim); }

#result-why { margin-bottom: .4rem; color: var(--dim); font-size: .8rem; font-weight: 600; }

/* ── 장비 ────────────────────────────────────────────────── */
.up-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.up-head #gearCoin { color: #ffd75e; font-size: .9rem; }
#gearList { display: grid; gap: .4rem; }
.gear-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(0, 0, 0, .28);
  border-radius: .7rem;
  padding: .4rem .6rem;
}
/* gear.webp(신발·물안경·로프)를 가로 3등분해 쓴다. */
.gicon {
  flex: 0 0 2.2rem;
  height: 2.2rem;
  background-image: url("../assets/gear.webp");
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 0% 50%;
}
.gicon[data-i="1"] { background-position: 50% 50%; }
.gicon[data-i="2"] { background-position: 100% 50%; }
.gear-txt { flex: 1; min-width: 0; text-align: left; }
.gear-name { font-size: .9rem; }
.gear-desc { font-size: .7rem; color: var(--dim); font-weight: 600; }
.gear-pips { display: flex; gap: .16rem; margin-top: .18rem; }
.pip { width: .8rem; height: .3rem; border-radius: 999px; background: rgba(255, 255, 255, .2); }
.pip.on { background: var(--sea); }
.gear-row .gbuy {
  flex: 0 0 5rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd28a, var(--accent));
  color: #40230a;
  font: inherit;
  font-weight: 800;
  padding: .4rem .3rem;
  font-size: .78rem;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 #c8791c;
}
.gbuy:disabled { filter: grayscale(1) brightness(.7); cursor: default; }

/* ── 안내 ────────────────────────────────────────────────── */
.guide-sheet ol { margin: 0 0 .5rem 1.1rem; }
.guide-sheet li { font-size: .84rem; font-weight: 600; color: var(--ink); margin-bottom: .18rem; }
.guide-tip { font-size: .78rem; font-weight: 600; color: var(--dim); }

/* ── 홈 — 가로 2단 ───────────────────────────────────────── */
/* 홈 배경은 **캔버스가 그린다**(app.js drawHomeBackdrop — 트랙이 천천히 흐른다).
   CSS 로 같은 그림을 또 깔면 720×1280 세로 그림이 가로 화면에서 3배로 확대돼 구름만 보인다. */
#home {
  background: linear-gradient(180deg, rgba(8, 18, 34, .10) 0%, rgba(8, 18, 34, .34) 55%, rgba(6, 14, 26, .62) 100%);
  overflow: hidden;
}

.home-sheet {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  max-width: 34rem;
  background: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.home-left { flex: 0 0 44%; text-align: center; }
.home-right { flex: 1; min-width: 0; text-align: center; }

/* ⚠️ `.sheet h1`(0,1,1) 이 `.home-title`(0,1,0) 을 이겨서 제목이 1.1rem 으로 눌려 있었다.
   부모를 붙여 넘긴다 — 이 파일에서 세 번째로 밟은 같은 함정이다. */
.home-sheet .home-title {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #ffe9bd;
  text-shadow: 0 2px 0 #1d4a7a, 0 4px 0 #0d2846, 0 .6rem 1rem rgba(0, 0, 0, .55);
  margin: 0 0 .3rem;
  cursor: pointer;
}
.home-tags { display: flex; justify-content: center; gap: .5rem; font-size: .8rem; color: var(--dim); }
.home-tags span { background: rgba(0, 0, 0, .35); border-radius: 999px; padding: .12rem .55rem; }
.champ-wrap { margin-top: .2rem; }
#homeHero {
  width: 6.4rem;
  height: auto;
  cursor: pointer;
  filter: drop-shadow(0 .5rem .5rem rgba(0, 0, 0, .55));
  animation: bob 2.6s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

#homeMain { width: 100%; }

#tapToStart {
  font-size: 1.45rem;
  font-weight: 900;
  color: #fff4dc;
  text-shadow: 0 2px 0 rgba(12, 45, 80, .9), 0 .5rem 1rem rgba(0, 0, 0, .5);
  margin: .2rem 0 .35rem;
  cursor: pointer;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .62; transform: scale(.985); }
  50% { opacity: 1; transform: scale(1.045); }
}

.home-sheet .gearbtn {
  width: 100%;
  padding: .45rem;
  border: 0;
  border-radius: 999px;
  background: rgba(12, 26, 44, .72);
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(190, 220, 255, .3);
}

.carousel {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: .45rem 0;
}
.home-sheet .skin-chip {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 0, 0, .35);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(200, 228, 255, .3);
}
.skin-chip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; display: block; }
.skin-chip.on { box-shadow: 0 0 0 3px #ffd75e; }
.skin-chip.locked { filter: brightness(.45) grayscale(.8); }

#homeTabs { display: flex; gap: .35rem; width: 100%; }
.home-sheet .tab-btn {
  flex: 1;
  padding: .45rem .2rem;
  border: 0;
  border-radius: .7rem;
  background: rgba(12, 26, 44, .65);
  color: var(--dim);
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(190, 220, 255, .22);
}
.tab-btn:active { background: var(--accent); color: #3b1d06; }

.panel { display: grid; gap: .3rem; }
.shop-row, .mission-row {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  background: rgba(12, 26, 44, .7);
  border-radius: .6rem;
  padding: .4rem .6rem;
  font-size: .78rem;
  color: var(--ink);
  cursor: pointer;
}
.panel .back {
  margin-top: .4rem;
  padding: .55rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd28a, var(--accent));
  color: #40230a;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* 토스트 */
#toast {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  z-index: 20;
  background: rgba(6, 13, 24, .9);
  color: var(--ink);
  border-radius: 999px;
  padding: .4rem .9rem;
  font-size: .8rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
#toast.on { opacity: 1; }

/* ── 데스크톱 = 가로 폰 프레임 (16:9라 레터박스 띠가 없다) ── */
#deskHint { display: none; }

@media (min-width: 768px) and (min-height: 600px) {
  #app {
    width: min(760px, calc(100vw - 64px), calc((100vh - 96px) * 640 / 360));
    height: auto;
    aspect-ratio: 640 / 360;
    border-radius: 30px;
    box-shadow: 0 0 0 10px #101c2e, 0 0 0 12px #233552, 0 40px 90px rgba(0, 0, 0, .6);
  }
  #stage { border-radius: 30px; }
  #deskHint {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 26px;
    text-align: center;
    font-size: .82rem;
    font-weight: 700;
    color: rgba(215, 235, 255, .55);
  }
}

/* 가로 전용 — 폰을 세로로 들면 안내를 띄운다. max-width 로 폰만 걸러야 한다
   (안 걸면 좁고 높은 데스크톱 창에서도 안내가 뜬다). */
#rotate { display: none; }
@media (orientation: portrait) and (max-width: 520px) {
  #app, #deskHint { display: none !important; }
  #rotate {
    display: flex;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--dim);
    font-size: 1.05rem;
    line-height: 1.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}