/* ═══════════════════════════════════════════════════════════════════
   Sudoku — Mac OS9 스타일 미니게임. blairtunes.js/css와 동일한 패턴으로
   별도 JS(src/js/sudoku.js)가 자신의 창 DOM을 만들어 document.body에
   붙인다. 창 크롬(헤더/핀스트라이프/close box)은 desktop.html의 다른
   창들과 동일한 Figma Mac-OS-9-UI-Kit 실측 스타일을 그대로 재사용.
   ═══════════════════════════════════════════════════════════════════ */

.sudoku-win {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 600;
  width: min(380px, calc(100vw - 40px));
  background: #ddd; color: #000;
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid #262626;
  box-shadow: inset 1px 1px 0 0 #f1f1f1, inset -1px -1px 0 0 #999, 2px 2px 0 0 rgba(0,0,0,0.5);
}
.sudoku-win[hidden] { display: none; }
.sudoku-win:focus { outline: none; }

/* ── 헤더 — 사이트의 다른 창(검정 콘텐츠)과 달리, 스도쿠는 실제 Mac OS9
   플래티넘 그레이 크롬으로 — 메뉴바(#ddd)와 동일 톤 재사용 ── */
.sudoku-header {
  height: 26px; width: 100%; flex-shrink: 0;
  /* 3열 그리드(1fr auto 1fr) — 닫기 버튼이 왼쪽에만 있어서 타이틀이 진짜
     중앙에서 밀려있던 문제 수정(desktop.html의 다른 창들과 동일한 방식,
     2026-08-02). */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 7px;
  padding: 4px;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  background: #ddd; border-bottom: 1px solid #262626;
  box-shadow: inset 1px 1px 0 0 #f1f1f1, inset -1px 0 0 0 #999;
}
.sudoku-win.dragging .sudoku-header { cursor: grabbing; }
.sudoku-header-side { display: flex; align-items: center; gap: 7px; height: 100%; min-width: 0; }
.sudoku-header-side-right { justify-content: flex-end; }
.sudoku-header-pinstripe {
  flex: 1; min-width: 8px; height: 19px;
  background-color: rgba(0,0,0,0.06);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 1px, rgba(0,0,0,0.35) 1px, rgba(0,0,0,0.35) 2px);
  border-left: 1px solid rgba(255,255,255,0.6); border-right: 1px solid rgba(0,0,0,0.25);
}
.sudoku-header-title {
  flex-shrink: 1; min-width: 0; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-family: 'VT323', monospace; font-size: 16px; line-height: 1; letter-spacing: -0.8px; color: #000;
}
.sudoku-close {
  flex-shrink: 0;
  width: 18px; height: 18px; padding: 0; cursor: pointer;
  border-style: solid; border-width: 1px; border-color: grey #f1f1f1 #f1f1f1 grey;
  background-image: linear-gradient(153deg, #9a9a9a, #f1f1f1);
  box-shadow: inset 0 0 0 1px #262626, inset 2px 2px 0 0 #f1f1f1, inset -2px -2px 0 0 gray;
}
.sudoku-close:active { filter: brightness(69%); }

/* ── 본문 ── */
.sudoku-body {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 20px 20px 24px;
}

/* 난이도 선택 + New Game — cu-btn과 동일한 흰 배경 베벨 버튼 언어 재사용 */
.sudoku-toolbar {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sudoku-diff-group { display: flex; gap: 4px; }
.sudoku-diff-btn, .sudoku-new-btn {
  background: #fff; border: 1px solid #000; padding: 4px 8px; cursor: pointer;
  font-family: 'VT323', monospace; font-size: 16px; line-height: 20px; letter-spacing: -0.8px;
  color: #000; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 1px 1px 0 0 #fff, inset -1px -1px 0 0 #999;
}
.sudoku-diff-btn:active, .sudoku-new-btn:active { filter: brightness(0.85); }
.sudoku-diff-btn.active {
  background: #000CEE; color: #fff;
  box-shadow: inset 1px 1px 0 0 rgba(255,255,255,0.4), inset -1px -1px 0 0 #000870;
}

/* 9x9 그리드 — 3x3 박스 경계는 진하게, 셀 경계는 얇게 */
.sudoku-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);
  width: 306px; height: 306px; flex-shrink: 0;
  background: #000; border: 2px solid #000;
}

/* 완성 시 보드 중앙에서 하트가 팡 터지며 사방으로 퍼짐(sudoku.js:spawnHeartBurst) */
.sudoku-heart-burst {
  position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 6;
  transform: translate(-50%, -50%);
  animation-name: sudoku-heart-burst-pop; animation-timing-function: ease-out; animation-fill-mode: forwards;
}
.sudoku-heart-burst svg { display: block; image-rendering: pixelated; }
@keyframes sudoku-heart-burst-pop {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(0.2) rotate(0deg); opacity: 0; }
  18%  { transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.35), calc(var(--dy) * 0.35)) scale(var(--peak)) rotate(calc(var(--rot) * 0.3)); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.85) rotate(var(--rot)); opacity: 0; }
}
.sudoku-cell {
  background: #fff; border: 1px solid #999;
  display: flex; align-items: center; justify-content: center;
  font-family: 'VT323', monospace; font-size: 22px; line-height: 1;
  color: #000CEE; cursor: pointer; padding: 0;
}
.sudoku-cell.given { color: #000; cursor: default; font-weight: normal; }
.sudoku-cell.error { color: #c00; }
.sudoku-cell.selected { background: #cdf; }
.sudoku-cell.given.selected { background: #ccc; }
.sudoku-cell.peer { background: #eef; }
.sudoku-cell.border-r3 { border-right: 2px solid #000; }
.sudoku-cell.border-b3 { border-bottom: 2px solid #000; }

/* 숫자 입력 패드 */
.sudoku-numpad {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: 100%;
}
.sudoku-num-btn {
  background: #fff; border: 1px solid #000; padding: 6px 0; cursor: pointer;
  font-family: 'VT323', monospace; font-size: 20px; line-height: 1; letter-spacing: -1px;
  color: #000; text-align: center;
  box-shadow: inset 1px 1px 0 0 #fff, inset -1px -1px 0 0 #999;
}
.sudoku-num-btn:active { filter: brightness(0.85); }
.sudoku-num-btn.sudoku-erase {
  grid-column: span 1; position: relative; overflow: visible;
  display: flex; align-items: center; justify-content: center;
}
.sudoku-num-btn.sudoku-erase svg { display: block; image-rendering: pixelated; }

/* 지우개를 누르면 버튼 주변으로 무작위 색 꽃이 튀어나왔다 사라짐(sudoku.js:spawnFlowerBloom) */
.sudoku-bloom {
  position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 5;
  transform: translate(-50%, -50%);
  animation: sudoku-bloom-pop 700ms ease-out forwards;
}
.sudoku-bloom svg { display: block; image-rendering: pixelated; }
@keyframes sudoku-bloom-pop {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(0.3) rotate(var(--rot0, 0deg)); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(var(--sc, 1)) rotate(var(--rot1, 30deg)); opacity: 0; }
}

.sudoku-status {
  width: 100%; text-align: center; min-height: 20px;
  font-family: 'VT323', monospace; font-size: 16px; letter-spacing: -0.8px; color: #000;
}
.sudoku-status.win { color: #0a0; }

/* ── 데스크탑 아이콘용 미니 그리드 글리프 (별도 이미지 에셋 없이 CSS로) ── */
.dt-sudoku-icon {
  width: 48px; height: 48px;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  background: #fff; border: 2px solid #262626;
  box-shadow: inset 1px 1px 0 0 #fff, inset -1px -1px 0 0 #999;
}
.dt-sudoku-icon span {
  border: 1px solid #999;
  display: flex; align-items: center; justify-content: center;
  font-family: 'VT323', monospace; font-size: 14px; color: #262626; line-height: 1;
}
.dt-icon:hover .dt-sudoku-icon { filter: brightness(0.78) contrast(1.05); }
.dt-icon:active .dt-sudoku-icon { filter: brightness(0.6); }

@media (max-width: 480px) {
  .sudoku-grid { width: 270px; height: 270px; }
}