:root {
  color-scheme: dark;
  --bg: #10141f;
  --panel: #151b29;
  --panel-2: #20283a;
  --ink: #f9f3e4;
  --muted: #b8b2a7;
  --line: #3a4257;
  --grass: #5fad56;
  --grass-dark: #2f6d3a;
  --sky: #8ed4f4;
  --sun: #ffd36e;
  --snack: #f3a03d;
  --danger: #e05757;
  --accent: #74d1a6;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 211, 110, 0.18), transparent 28%),
    linear-gradient(135deg, #0d1320 0%, #172032 54%, #0b111b 100%);
  color: var(--ink);
  font-family:
    "Trebuchet MS",
    "Gill Sans",
    "Apple SD Gothic Neo",
    sans-serif;
}

button {
  font: inherit;
}

.shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.game-panel {
  width: min(1120px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(21, 27, 41, 0.95), rgba(12, 16, 26, 0.98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1;
}

.meters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.meters span,
kbd {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.meters span {
  padding: 8px 10px;
}

.meters strong {
  color: var(--ink);
  font-size: 18px;
}

.canvas-wrap {
  position: relative;
  background: #070b12;
}

canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  image-rendering: crisp-edges;
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 11, 18, 0.54);
}

.overlay.is-hidden {
  display: none;
}

.overlay-card {
  width: min(460px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(18, 24, 36, 0.94);
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
}

.overlay-card h2 {
  font-size: 28px;
}

.overlay-card p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.7;
}

.overlay-card button {
  min-width: 120px;
  border: 0;
  border-radius: 6px;
  background: var(--sun);
  color: #281d08;
  cursor: pointer;
  font-weight: 900;
  padding: 12px 18px;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 18px;
}

.key-help {
  color: var(--muted);
  font-size: 13px;
  line-height: 2.4;
}

.settings {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.settings button {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: #1d2638;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 11px;
}

.settings button.is-selected {
  border-color: rgba(116, 209, 166, 0.75);
  background: #18382f;
  color: #aef3d2;
}

kbd {
  margin: 0 3px;
  padding: 4px 7px;
  color: var(--ink);
}

.touch-controls {
  display: flex;
  gap: 8px;
}

.touch-controls button {
  width: 52px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: #222c40;
  color: var(--ink);
  cursor: pointer;
  font-size: 20px;
  font-weight: 900;
}

.touch-controls button:active {
  transform: translateY(1px);
  background: #31405d;
}

@media (max-width: 720px) {
  .shell {
    padding: 10px;
  }

  .topbar,
  .controls {
    align-items: start;
    flex-direction: column;
  }

  .meters {
    justify-content: flex-start;
  }
}


/* ── 모바일 터치 개선 (6/11) ── */

/* 길게 눌러도 텍스트 선택·콜아웃·스크롤이 끼어들지 않게 차단 */
.touch-controls,
.touch-controls button {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 세로 화면 안내 — 모바일 세로일 때만 표시 */
.rotate-hint {
  display: none;
  margin: 0;
  padding: 8px 16px;
  background: rgba(255, 211, 110, 0.12);
  color: var(--sun);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 720px) and (orientation: portrait) {
  .rotate-hint {
    display: block;
  }
}

/* 모바일에서 터치 버튼 키우기 (엄지 조작) */
@media (max-width: 720px) {
  .touch-controls {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .touch-controls button {
    flex: 1;
    height: 64px;
    font-size: 26px;
  }
}

/* ── 게임패드식 양손 터치 인터페이스 (6/11) ── */
.touch-controls {
  flex: 1;
  justify-content: space-between;
}

.touch-group {
  display: flex;
  gap: 8px;
}

/* 동작 버튼은 색으로 구분 (점프=노랑, 발차기=초록) */
.touch-controls .action-jump {
  background: rgba(255, 211, 110, 0.22);
  border-color: rgba(255, 211, 110, 0.45);
}

.touch-controls .action-kick {
  background: rgba(116, 209, 166, 0.18);
  border-color: rgba(116, 209, 166, 0.4);
}

@media (max-width: 720px) {
  /* 모바일: 양손 엄지 거리만큼 벌리고 버튼을 크게 */
  .controls {
    flex-direction: column;
  }

  .key-help {
    display: none; /* 키보드 안내는 모바일에서 무의미 */
  }

  .touch-controls {
    width: 100%;
  }

  .touch-group {
    gap: 12px;
  }

  .touch-controls button {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    font-size: 28px;
  }
}

/* ── 최종 터치 인터페이스: 캔버스 위 오버레이 패드 (6/11 v2) ──
   기준을 화면 폭이 아닌 입력 방식(pointer: coarse)으로 — 가로 모드에서도 동일하게 동작.
   위의 구버전 터치 규칙들은 아래가 전부 덮어쓴다. */

.overlay {
  z-index: 10; /* 시작·재시작 화면이 터치 패드 위에 오도록 */
}

.touch-controls {
  display: none; /* 마우스(데스크톱)에서는 숨김 — 키보드 조작 */
}

body.is-touch .key-help {
  display: none; /* 터치 기기에서 키보드 안내는 무의미 */
}

body.is-touch .touch-controls {
  /* 미디어쿼리 대신 JS 감지 클래스 — 에뮬·실기기 모두 일관 동작 */
    display: flex;
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none; /* 패드 사이 빈 공간은 캔버스 터치 통과 */
    z-index: 5;
  }

body.is-touch .touch-group {
  display: flex;
  gap: 10px;
}

body.is-touch .touch-controls button {
    pointer-events: auto;
    flex: none;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(10, 14, 22, 0.45);
    color: rgba(255, 255, 255, 0.9);
    font-size: 24px;
  }

body.is-touch .touch-controls button:active {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0.94);
  }

body.is-touch .touch-controls .action-jump {
    background: rgba(255, 211, 110, 0.3);
    border-color: rgba(255, 211, 110, 0.55);
  }

body.is-touch .touch-controls .action-kick {
    background: rgba(116, 209, 166, 0.28);
    border-color: rgba(116, 209, 166, 0.5);
  }

/* 터치 기기: 캔버스가 화면(뷰포트) 안에 들어오게 — 가로 모드에서 패드·화면 동시 표시 */
body.is-touch .canvas-wrap {
  display: flex;
  justify-content: center;
}

body.is-touch canvas {
  width: auto;
  max-width: 100%;
  max-height: calc(100svh - 104px); /* 상단바 높이만큼 남김 */
}

/* 터치 기기 가로 모드: 상단바를 한 줄로 슬림하게 */
@media (orientation: landscape) {
  body.is-touch .topbar {
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
  }

  body.is-touch .topbar h1 {
    font-size: 18px;
  }

  body.is-touch .rotate-hint {
    display: none;
  }
}
/* 나가기 버튼 — 게임 허브(obongi.com/games)로 이동 */
.exit-button {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  text-decoration: none;
}
.exit-button:hover {
  background: rgba(255, 255, 255, 0.16);
}