/* ============================================================
   사이먼 게임 전용 스타일
   - 방향: 밝고 순한 느낌, 고대비, 큰 활자 (노년층 사용자 기준)
   - 버튼 4개는 색 + 위치 + 소리로 구분. 평소엔 차분하게,
     깜빡일 때는 밝기가 크게 뛰어 색약 사용자도 알아볼 수 있게.
   ============================================================ */

:root {
  /* 평소 색(차분) / 깜빡일 때 색(선명) 짝. 네 색은 밝기 자체도 서로 다르게 */
  --sm-pad0: #c65545;  --sm-pad0-lit: #ff7a4d;  /* 왼쪽 위: 주황 */
  --sm-pad1: #c99a17;  --sm-pad1-lit: #ffd23e;  /* 오른쪽 위: 노랑 */
  --sm-pad2: #3d8a4e;  --sm-pad2-lit: #5fd97a;  /* 왼쪽 아래: 초록 */
  --sm-pad3: #35599c;  --sm-pad3-lit: #6fa4ff;  /* 오른쪽 아래: 파랑 */
  --sm-turn-watch-bg: #f5e3c8;  --sm-turn-watch-fg: #7a5410;
  --sm-turn-input-bg: #d9edda;  --sm-turn-input-fg: #1d5f2a;
  /* 게임판 프레임: 지금이 어느 차례인지 게임판 자체가 입는 색 */
  --sm-frame-watch: #e3b463;
  --sm-frame-input: #4da362;
  --sm-frame-reveal: #d4675a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sm-pad0: #8a3a2e;  --sm-pad1: #8a6a10;
    --sm-pad2: #2a5f36;  --sm-pad3: #27406e;
    --sm-turn-watch-bg: #4a3a17;  --sm-turn-watch-fg: #f2d9a4;
    --sm-turn-input-bg: #1e3d24;  --sm-turn-input-fg: #b9e5c0;
    --sm-frame-watch: #a3782c;
    --sm-frame-input: #4d9760;
    --sm-frame-reveal: #b05548;
  }
}
:root[data-theme="dark"] {
  --sm-pad0: #8a3a2e;  --sm-pad1: #8a6a10;
  --sm-pad2: #2a5f36;  --sm-pad3: #27406e;
  --sm-turn-watch-bg: #4a3a17;  --sm-turn-watch-fg: #f2d9a4;
  --sm-turn-input-bg: #1e3d24;  --sm-turn-input-fg: #b9e5c0;
  --sm-frame-watch: #a3782c;
  --sm-frame-input: #4d9760;
  --sm-frame-reveal: #b05548;
}

/* ---- 도입부 ---- */
.tool-intro { padding: clamp(30px, 5vw, 56px) 0 clamp(18px, 3vw, 30px); }
.tool-intro h1 { margin: 0 0 var(--space-4); }
.tool-intro .lead {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--color-text-sub);
  max-width: 52ch;
  margin: 0;
}
.tool-intro .lead strong { color: var(--color-text); }
.tool-intro .lead-note {
  margin: var(--space-3) 0 0;
  font-size: .88rem;
  color: var(--color-text-sub);
}

/* ---- 설정 줄 ---- */
.sm-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.sm-field { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.sm-lab { font-size: .95rem; font-weight: 700; color: var(--color-text-sub); }
.sm-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sm-chip {
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.sm-chip:hover { border-color: var(--color-primary); }
.sm-chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
/* 시작 단계 스테퍼: 큰 터치 영역, 큰 숫자 */
.sm-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.sm-step-btn {
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.sm-step-btn:hover:not(:disabled) { border-color: var(--color-primary); }
.sm-step-btn:disabled { opacity: .35; cursor: default; }
.sm-step-val {
  min-width: 2.2ch;
  text-align: center;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.sm-btn-restart {
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text-sub);
}
.sm-btn-restart:hover { border-color: var(--color-primary); color: var(--color-text); }

/* ---- 게임판 ---- */
.sm-stage { max-width: 520px; margin: 0 auto; }

.sm-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sm-stat {
  font-size: 1.05rem;
  color: var(--color-text-sub);
  font-variant-numeric: tabular-nums;
  min-width: 72px;
}
.sm-stat:last-child { text-align: right; }
.sm-stat b { font-size: 1.25rem; color: var(--color-text); }

/* 지금이 볼 차례인지 누를 차례인지: 항상 보이는 큰 표시 */
.sm-turn {
  flex: 1;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-sub);
  transition: background .2s ease, color .2s ease;
}
.sm-turn[data-mode="watch"] {
  background: var(--sm-turn-watch-bg);
  border-color: transparent;
  color: var(--sm-turn-watch-fg);
}
.sm-turn[data-mode="input"] {
  background: var(--sm-turn-input-bg);
  border-color: transparent;
  color: var(--sm-turn-input-fg);
}

.sm-board-wrap { position: relative; }
.sm-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2.5vw, 16px);
  aspect-ratio: 1 / 1;
  padding: clamp(12px, 3vw, 18px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease;
}

/* 게임판이 차례를 입는다: 시선이 머무는 곳이 직접 바뀌어야 인지된다.
   볼 차례·정답 확인 중엔 버튼을 어둡게 눌러 "지금은 못 만짐"을 보여주고,
   그 덕에 깜빡이는 버튼(원색)과의 대비도 커진다 */
.sm-board[data-phase="watch"] .sm-pad:not(.is-lit),
.sm-board[data-phase="reveal"] .sm-pad:not(.is-lit) {
  filter: saturate(.5) brightness(.68);
}
.sm-board[data-phase="watch"] {
  box-shadow: 0 0 0 3px var(--sm-frame-watch);
}
.sm-board[data-phase="input"],
.sm-board[data-phase="success"] {
  box-shadow: 0 0 0 3px var(--sm-frame-input);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .sm-board[data-phase="input"],
  .sm-board[data-phase="success"] {
    box-shadow: 0 0 0 3px var(--sm-frame-input),
                0 2px 18px color-mix(in srgb, var(--sm-frame-input) 45%, transparent);
  }
}
.sm-board[data-phase="reveal"] {
  box-shadow: 0 0 0 3px var(--sm-frame-reveal);
}

/* 색 버튼: 터치 영역 최대, 더블탭 확대 방지 */
.sm-pad {
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: filter .1s ease, transform .1s ease, box-shadow .1s ease;
}
.sm-pad:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }
.sm-pad-0 { background: var(--sm-pad0); }
.sm-pad-1 { background: var(--sm-pad1); }
.sm-pad-2 { background: var(--sm-pad2); }
.sm-pad-3 { background: var(--sm-pad3); }

/* 깜빡임: 색이 확 밝아지고 흰 테두리 + 빛 번짐. 밝기 점프가 커서 색약에도 뚜렷 */
.sm-pad.is-lit { transform: scale(.965); }
.sm-pad-0.is-lit { background: var(--sm-pad0-lit); box-shadow: 0 0 0 4px #fff inset, 0 0 26px var(--sm-pad0-lit); }
.sm-pad-1.is-lit { background: var(--sm-pad1-lit); box-shadow: 0 0 0 4px #fff inset, 0 0 26px var(--sm-pad1-lit); }
.sm-pad-2.is-lit { background: var(--sm-pad2-lit); box-shadow: 0 0 0 4px #fff inset, 0 0 26px var(--sm-pad2-lit); }
.sm-pad-3.is-lit { background: var(--sm-pad3-lit); box-shadow: 0 0 0 4px #fff inset, 0 0 26px var(--sm-pad3-lit); }

/* 내 차례가 아닐 때는 눌러도 반응 없음을 시각적으로도 살짝 */
.sm-board[data-locked="true"] .sm-pad { cursor: default; }

/* ---- 오버레이(시작/종료) ---- */
.sm-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: color-mix(in srgb, var(--color-bg) 74%, transparent);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .sm-overlay { background: rgba(243, 240, 232, .82); }
  :root[data-theme="dark"] .sm-overlay { background: rgba(23, 19, 14, .82); }
}
.sm-overlay-panel {
  text-align: center;
  padding: var(--space-5);
}
.sm-overlay-note {
  margin: 0 0 var(--space-4);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
}
.sm-btn-big {
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  padding: 18px 44px;
  border-radius: 999px;
  border: 0;
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow);
}
.sm-btn-big:hover { filter: brightness(1.06); }
.sm-btn-big:active { transform: scale(.97); }

.sm-over-label { margin: 0; font-size: 1.05rem; color: var(--color-text-sub); }
.sm-over-level {
  margin: var(--space-1) 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.15;
}
.sm-over-level b { font-size: 3.4rem; color: var(--color-primary); }
.sm-over-best {
  margin: 0 0 var(--space-5);
  font-size: 1.05rem;
  color: var(--color-text-sub);
}
.sm-over-best .sm-new-record { color: var(--color-primary); font-weight: 700; }

/* ---- 안내 문구 ---- */
.sm-msg {
  min-height: 1.8em;
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
}

/* ---- 본문 ---- */
.prose { max-width: 720px; margin: clamp(40px, 6vw, 64px) auto 0; }
.prose h2 { margin: 0 0 var(--space-3); }
.prose p { margin: 0 0 var(--space-3); color: var(--color-text); }
.prose ul { margin: 0; padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-2); }
.prose li strong { color: var(--color-text); }

@media (prefers-reduced-motion: reduce) {
  .sm-pad, .sm-turn, .sm-btn-big { transition: none; }
  .sm-pad.is-lit { transform: none; }
}

@media (max-width: 420px) {
  .sm-stat { min-width: 58px; font-size: .95rem; }
  .sm-turn { font-size: 1.02rem; padding: 9px 10px; }
}