/* 색·글꼴·기본 뼈대 (PLAN.md 8.1~8.3)
   컨셉: 밤 편의점 창문. 플레이 영역은 밝고 주변은 어둡다.
   밝은 배경 위 짙은 글자가 순간 판독에 유리하며, 타자 게임에서는 이게 취향보다 앞선다. */

:root {
  --night: #16193B;      /* 밤(주변) */
  --window: #FFF9EC;     /* 창문(플레이 패널) — 편의점 조명색 */
  --ink: #1A1A2E;        /* 패널 위 본문 */
  --left: #E8547C;       /* 왼손 — 딸기 */
  --right: #159F8C;      /* 오른손 — 민트 */

  /* 손가락 명도 4단계 (f1 검지 … f4 새끼). 키보드와 글자가 같은 값을 쓴다 —
     두 곳에 따로 적어 두면 언젠가 어긋나고, 그 순간 교육 장치가 거짓말이 된다 */
  --left-f1: #E8547C;  --left-f2: #EE7395;  --left-f3: #F492AF;  --left-f4: #F9B2C8;
  --right-f1: #159F8C; --right-f2: #3DB5A4; --right-f3: #6BCBBD; --right-f4: #9BE0D5;
  --accent: #FFB300;     /* 포인트·성공 */
  --again: #8A8FA8;      /* 저연령 오답 — 중립 회색 */
  --wrong: #D93A3A;      /* 고연령 오답 */

  --night-2: #1F2350;
  --night-3: #2A2F63;
  --ink-soft: #5B6076;

  --radius: 14px;
  --gap: clamp(6px, 1vh, 12px);

  /* 다섯 영역의 높이. 1366×768 에서 합이 100vh 를 넘지 않게 잡았다 (PLAN.md 8.6) */
  --h-hud: 7vh;
  --h-input: 9vh;
  --h-keyboard: 30vh;
  --h-shelf: 12vh;

  --font: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo',
          'Malgun Gothic', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* 게임 화면은 스크롤이 없다 */
}

body {
  background: radial-gradient(120% 90% at 50% 0%, var(--night-3) 0%, var(--night) 62%);
  color: var(--window);
  font-family: var(--font);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
}

#app { height: 100%; }

button {
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  border: 0;
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--window);
  padding: 0.55em 1.1em;
  transition: transform .08s ease, filter .15s ease;
}
button:hover:not(:disabled) { filter: brightness(1.04); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .38; cursor: default; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.btn--big { font-size: clamp(15px, 1.9vh, 21px); padding: .7em 1.5em; background: var(--accent); }
.btn--small { padding: .35em .8em; font-size: 13px; }

h1, h2 { margin: 0; }

/* 알림 한 줄 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 3vh;
  transform: translateX(-50%);
  background: var(--window);
  color: var(--ink);
  padding: .7em 1.3em;
  border-radius: 999px;
  font-size: 15px;
  box-shadow: 0 10px 30px rgb(0 0 0 / .45);
  z-index: 60;
  animation: toast-in .18s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* 좁은 화면 안내 */
.narrow {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--night);
  color: var(--window);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}
.narrow__big { font-size: 8vw; margin: 0; }
.narrow__sub { font-size: 4vw; margin: 0; color: var(--again); }
body.is-too-narrow .narrow { display: flex; }
body.is-too-narrow #app { display: none; }

/* 움직임을 줄여 달라는 설정을 존중한다 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}