/* 스도쿠 화면 */
.sd { width: min(980px, 100%); }

button.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
button small { font-weight: 500; opacity: 0.7; font-size: 11px; }

.sd-setup { margin-bottom: 14px; }
.sd-levels { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sd-levels button {
  padding: 7px 12px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 14px;
}
.sd-levels button[aria-checked="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.sd-levels .lv { font-size: 11px; opacity: 0.6; margin-right: 3px; }

.sd-pick {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.sd-pick label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.sd-pick input { width: 110px; }
.sd-today { text-align: center; color: var(--muted); font-size: 12px; margin: 8px 0 0; }

.sd-info { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sd-title { font-weight: 800; font-size: 17px; }
.sd-timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 22px; }
.penalty { font-size: 13px; color: #c2410c; margin-left: 6px; font-weight: 700; }
.sd-stats { display: flex; gap: 14px; font-size: 13px; color: var(--muted); margin: 4px 0 10px; }

.sd-main { display: grid; grid-template-columns: minmax(0, 540px) 1fr; gap: 16px; align-items: start; }

/* 판 */
.sd-board-wrap { position: relative; }
.sd-board {
  display: grid;
  grid-template-columns: repeat(var(--n, 9), 1fr);
  grid-template-rows: repeat(var(--n, 9), 1fr);
  aspect-ratio: 1 / 1;
  width: 100%;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 6px;
  user-select: none;
  outline: none;
  touch-action: manipulation;
}
.sd-board:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.sd-board.hidden-board .cell { color: transparent; }
.sd-board.hidden-board .notes { visibility: hidden; }

.cell {
  position: relative;
  display: grid;
  place-items: center;
  border-right: 1px solid #cfc8b8;
  border-bottom: 1px solid #cfc8b8;
  font-size: clamp(18px, 4.6vw, 28px);
  font-weight: 600;
  color: #2a4fa8;
  cursor: pointer;
}
.cell.c2, .cell.c5 { border-right: 2px solid var(--ink); }
.cell.r2, .cell.r5 { border-bottom: 2px solid var(--ink); }
.cell.lastc { border-right: 0; }
.cell.lastr { border-bottom: 0; }

.cell.given { color: var(--ink); font-weight: 800; }
.cell.wrong { color: #d12d1f; background: #fdeceb; }
.cell.peer { background: #f3efe6; }
.cell.same { background: #e3ebfb; }
.cell.sel { background: #c8d8fa; }
.cell.wrong.sel { background: #f8d2ce; }

/* 힌트: 주황 박스 깜빡임 */
.cell.hint-pattern { box-shadow: inset 0 0 0 100px rgba(251, 146, 60, 0.18); }
.cell.hint-target { animation: hint-blink 0.8s ease-in-out infinite; }
/* 힌트로 받은 칸: 노란 네모 (누르면 힌트 다시 보기) */
.cell.hint-done { box-shadow: inset 0 0 0 3px #facc15; }
.cell.hint-done.hint-pattern { box-shadow: inset 0 0 0 3px #facc15, inset 0 0 0 100px rgba(251, 146, 60, 0.18); }
@keyframes hint-blink {
  0%, 100% { box-shadow: inset 0 0 0 3px #f97316, inset 0 0 0 100px rgba(249, 115, 22, 0.25); }
  50%      { box-shadow: inset 0 0 0 3px #f97316, inset 0 0 0 100px rgba(249, 115, 22, 0); }
}

.notes {
  position: absolute;
  inset: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font-size: clamp(8px, 1.6vw, 11px);
  font-weight: 600;
  color: #7c7568;
  line-height: 1;
}
.notes span { display: grid; place-items: center; }

/* 시작 전 가림막 */
.sd-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: rgba(246, 243, 236, 0.86);
  backdrop-filter: blur(6px);
  border-radius: 6px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding: 16px;
}
.sd-cover[hidden] { display: none; }
.sd-cover button { font-size: 18px; padding: 12px 34px; }

/* 숫자 패드 */
.sd-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sd-pad button {
  font-size: 22px;
  padding: 12px 0;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  position: relative;
}
.sd-pad button .left { position: absolute; right: 6px; bottom: 3px; font-size: 10px; color: var(--muted); font-weight: 600; }
.sd-pad button.done { opacity: 0.35; }
.sd-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
#note[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.hint-btn { background: #f97316; }

.sd-hint {
  margin-top: 10px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
}
.sd-hint ol { margin: 6px 0 0; padding-left: 18px; }
.sd-hint .hint-ok { margin: 6px 0 0; color: #15803d; font-weight: 800; }
.hint-btn.hiding { background: #fff; color: #c2410c; border: 1px solid #fdba74; }

/* 틀렸을 때 살짝 흔들기 (입문) */
.cell.shake { animation: shake 0.4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .cell.hint-target, .cell.shake { animation: none; }
  .cell.hint-target { box-shadow: inset 0 0 0 3px #f97316; }
}

/* ---------- 입문 (유치원생 모드, 3×3) ---------- */
.kid-only { display: none; }
.sd-play.kid .kid-only { display: inline; }
.sd-play.kid .no-kid { display: none !important; }
.sd-board.mini { max-width: 420px; margin: 0 auto; border-width: 4px; border-radius: 14px; overflow: hidden; }
.sd-board.mini .cell {
  font-size: clamp(44px, 16vw, 84px);
  font-weight: 800;
  border-right: 3px solid #cfc8b8;
  border-bottom: 3px solid #cfc8b8;
}
.sd-board.mini .cell.lastc { border-right: 0; }
.sd-board.mini .cell.lastr { border-bottom: 0; }
.sd-main.kid .sd-pad { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sd-main.kid .sd-pad button { font-size: 44px; padding: 18px 0; border-radius: 16px; border-width: 2px; }
.sd-main.kid .sd-tools { grid-template-columns: 1fr; }
.sd-main.kid .sd-tools button { font-size: 20px; padding: 14px; border-radius: 14px; }
.sd-main.kid .sd-hint { font-size: 20px; line-height: 1.6; padding: 14px 16px; }
.sd-main.kid .sd-hint ol { list-style: none; padding-left: 0; margin: 0; }
.sd-play.kid #stars { font-weight: 800; font-size: 18px; color: #b45309; }
.sd-result.kid .big { font-size: 64px; }
.sd-result.kid h2 { font-size: 26px; }

.sd-records { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.sd-records h2 { font-size: 14px; margin: 0 0 6px; }
.sd-records ol { margin: 0; padding-left: 22px; font-size: 13px; }
.sd-records li { padding: 2px 0; font-variant-numeric: tabular-nums; }
.sd-records li.empty { list-style: none; margin-left: -22px; color: var(--muted); }
.sd-records .pf { color: #b45309; font-weight: 800; margin-left: 4px; }
.sd-nick { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--muted); }

/* 결과 */
.sd-result {
  border: 0;
  border-radius: 14px;
  padding: 22px 26px;
  text-align: center;
  min-width: min(320px, 90vw);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
.sd-result::backdrop { background: rgba(0, 0, 0, 0.35); }
.sd-result h2 { margin: 0; }
.sd-result .big { font-size: 34px; font-weight: 800; margin: 8px 0; font-variant-numeric: tabular-nums; }
.sd-result .detail { color: var(--muted); font-size: 13px; margin: 0; }
.sd-result .rank { font-weight: 700; margin: 10px 0 14px; }
.sd-result .actions { display: flex; gap: 8px; justify-content: center; }
.perfect-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fbbf24;
  color: #4a2b00;
  font-size: 14px;
  vertical-align: middle;
}

@media (max-width: 760px) {
  .sd-main { grid-template-columns: 1fr; }
  .sd-pad { grid-template-columns: repeat(9, 1fr); gap: 4px; }
  .sd-pad button { font-size: 18px; padding: 10px 0; }
  .sd-pad button .left { display: none; }
  .sd-tools button { padding: 9px 4px; font-size: 13px; }
  .sd-tools small { display: block; }
  .sd-timer { font-size: 19px; }
}

@media (max-width: 760px) {
  .sd-main.kid .sd-pad { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .sd-main.kid .sd-pad button { font-size: 40px; padding: 16px 0; }
}