:root {
  --bg: #e8f5d8;
  --surface: #ffffff;
  --text: #1f2a1a;
  --muted: #5b6b52;
  --border: #cfe3bb;
  --accent: #e53935;
  --accent-dark: #b71c1c;
  --board: #f4fbec;
  --select: rgba(33, 150, 243, 0.18);
  --select-border: #1e88e5;
  --gold: #f9a825;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #18210f;
    --surface: #222d18;
    --text: #eef5e6;
    --muted: #a5b897;
    --border: #36472a;
    --board: #1d2714;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

#app { height: 100vh; height: 100dvh; }
#start, #result { max-width: 900px; margin: 0 auto; }
#start { position: relative; }

.teacher-link {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 12px;
}
.teacher-link:active { color: var(--text); }
/* 좁은 화면에서 제목과 겹치지 않게 제목을 조금 내린다 */
@media (max-width: 480px) {
  #start h1 { margin-top: 44px; }
}

.screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
}

h1 { font-size: 2.2rem; margin: 12px 0 4px; }
h2 { font-size: 1.8rem; margin: 16px 0 0; }
.rules { text-align: center; color: var(--muted); line-height: 1.6; margin: 8px 0 16px; }

.start-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; }
.start-form .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.start-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}
.start-form input, .start-form select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 400;
  padding: 11px 12px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}
.start-form input:focus, .start-form select:focus { outline: none; border-color: var(--accent); }
.start-form button { margin-top: 4px; }

button {
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  cursor: pointer;
}
.primary { background: var(--accent); color: #fff; }
.primary:active { background: var(--accent-dark); }
.secondary { background: var(--surface); color: var(--text); border: 2px solid var(--border); }

/* 랭킹 */
.leaderboard {
  width: 100%;
  max-width: 420px;
  margin-top: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.tabs { display: flex; border-bottom: 1px solid var(--border); }
.tabs button {
  flex: 1;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  padding: 12px;
}
.tabs button.active { color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.ranks { list-style: none; margin: 0; padding: 4px 0; counter-reset: rank; }
.ranks li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  counter-increment: rank;
}
.ranks li::before {
  content: counter(rank);
  width: 1.8em;
  text-align: center;
  font-weight: 700;
  color: var(--muted);
}
.ranks li:nth-child(1)::before { content: "🥇"; }
.ranks li:nth-child(2)::before { content: "🥈"; }
.ranks li:nth-child(3)::before { content: "🥉"; }
.ranks li.me { background: rgba(229, 57, 53, 0.1); font-weight: 700; }
.ranks .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranks .who { color: var(--muted); font-size: 0.85rem; font-weight: 400; margin-right: 6px; }
.ranks .pts { font-weight: 700; font-variant-numeric: tabular-nums; }
.ranks .empty { justify-content: center; color: var(--muted); }
.ranks li.empty::before { content: none; }

/* 게임 화면 */
/* 가로 17칸 x 세로 10칸 보드를 화면에 꽉 차게. 노치나 홈 막대 영역은 피한다 */
#game {
  position: relative; /* 확인 창의 기준. 세로 화면에서는 아래 회전 규칙이 fixed로 바꾼다 */
  overflow: hidden;
  padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  /* 게임 중에는 스크롤, 확대, 길게 눌러 글자 선택/메뉴가 일어나지 않게 */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 휴대폰을 세로로 들고 있으면 게임 화면을 시계 방향으로 90도 돌려 가로로 보여준다.
   (game.js의 rotatedQuery와 같은 조건이어야 터치 위치가 맞는다) */
@media (orientation: portrait) and (pointer: coarse) {
  #game {
    position: fixed;
    top: 0;
    left: 0;
    /* 돌리기 전 크기 = 화면의 세로 x 가로 */
    width: 100vh;
    width: 100dvh;
    height: 100vw;
    height: 100dvw;
    transform-origin: top left;
    transform: rotate(90deg) translateY(-100%);
    /* 돌린 뒤에는 화면 위쪽(노치)이 왼쪽, 아래쪽(홈 막대)이 오른쪽이 된다 */
    padding: 6px max(8px, env(safe-area-inset-bottom)) 6px max(8px, env(safe-area-inset-top));
  }
}

.hud {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font-size: 1.1rem;
  padding: 0 4px 6px;
}
.hud .score b, .hud .time { font-variant-numeric: tabular-nums; font-weight: 700; }
.hud .score b { display: inline-block; min-width: 2.2em; }
.timer { flex: 1; height: 12px; background: var(--border); border-radius: 999px; overflow: hidden; }
#timer-bar { height: 100%; width: 100%; background: #43a047; border-radius: inherit; }
#timer-bar.low { background: var(--accent); }
.icon-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1.1rem;
  line-height: 1;
  padding: 6px 8px;
}

#board-wrap {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-auto-rows: var(--cell);
  background: var(--board);
  border: 2px solid var(--border);
  border-radius: 12px;
}
.apple {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: calc(var(--cell) * 0.46);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.apple::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 46% 46% 50% 50%;
  background: radial-gradient(circle at 32% 30%, #ff8a80 0%, var(--accent) 45%, var(--accent-dark) 100%);
  z-index: -1;
}
.apple::after {
  content: "";
  position: absolute;
  top: 2%;
  left: 52%;
  width: 22%;
  height: 14%;
  background: #66bb6a;
  border-radius: 0 80% 0 80%;
}
#board .apple { z-index: 0; isolation: isolate; }
.apple.selected { transform: scale(1.12); }
.apple.selected::before { background: radial-gradient(circle at 32% 30%, #ffcc80 0%, #fb8c00 50%, #e65100 100%); }
/* 지운 사과. 떨어지는 움직임은 game.js의 dropApple이 사과마다 다르게 만든다 */
.apple.gone { z-index: 3; pointer-events: none; transition: none; }

.selection {
  position: absolute;
  border: 2px solid var(--select-border);
  background: var(--select);
  border-radius: 4px;
  pointer-events: none;
  display: none;
  z-index: 2;
}

/* 게임 중 그만두기 확인 창 (게임 화면 안에 있어서 화면이 돌아가면 같이 돌아간다) */
.dialog-backdrop {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}
.dialog {
  background: var(--surface);
  color: var(--text);
  border-radius: 16px;
  padding: 20px 22px 18px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.dialog p { margin: 0 0 16px; line-height: 1.6; }
.dialog .actions { justify-content: center; }

/* 결과 화면 */
.final { font-size: 1.4rem; margin: 8px 0 0; }
.final b { font-size: 3.4rem; color: var(--accent); }
.status { min-height: 1.4em; color: var(--muted); margin: 6px 0 12px; text-align: center; }
.actions { display: flex; gap: 8px; }