/* 여름 밤바다 — 어두운 바다 위에 놓인 도자기.
   구조는 shell.css 그대로 두고 토큰만 갈아끼운다.
   색이 들어가는 자리(띠·버튼·문제판 칸)만 남색→하늘색 그라데이션 + 노이즈. */

[data-theme="night"] {
  /* 아련·몽롱 — 바탕은 완전한 검정. 색은 조각·CTA·상단 띠에만 남긴다. */
  --surround: #000000;
  --paper: #000000;
  --gray: #000000;           /* 회색 블록도 검정 — 구분은 선으로만 */
  --ink: #e6efff;
  --accent: #6cb8ff;
  --hint: #6cb8ff;
  --line: 1px solid rgba(120,170,255,.24);
  --hair: rgba(150,195,255,.13);
  --muted: #4a6488;
  --bad: #ff8368;
  --bad-bg: #1a0906;
  --press: #0d1626;

  /* 문제판 — 위는 깊은 남색, 아래로 갈수록 물빛 */
  --board-paper: #000000;
  --board-grid: 150,195,255;
  --board-ink-top: #2f6fbf;
  --board-ink-bottom: #cfe9ff;
  --board-noise: .55;
  --board-fade: 250;         /* 조각이 겹쳐 넘어가는 시간 — 아련하게 */

  /* 색이 들어가는 면에 공통으로 깔리는 그라데이션.
     45도 대각선, 검정이 절반 넘게 — 물빛은 끝에서만 올라온다. */
  --grad: linear-gradient(135deg,
            #000000 0%, #000000 34%, #0a1c33 56%, #1c4c86 78%, #6fb1ea 100%);
  /* 페이지 여백 — 세로. 위에서 물빛이 내려와 40% 지점에서 검정으로 잠긴다 */
  --grad-page: linear-gradient(180deg,
            #7cc0f5 0%, #2f6fbf 15%, #123963 27%, #05121f 36%,
            #000000 41%, #000000 100%);
  /* 버튼은 눌러야 하는 면이라 검정을 줄이고 물빛을 일찍 올린다 */
  --grad-btn: linear-gradient(135deg,
            #000000 0%, #05121f 12%, #123963 42%, #2f6fbf 72%, #7cc0f5 100%);
  /* 노이즈 — feTurbulence 한 장을 반복해서 깐다 (외부 파일 없음) */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 모든 글자에 옅은 번짐. text-shadow 는 상속되므로 body 한 곳이면 된다.
   색면 위 글자는 아래에서 조금 더 세게 덮어쓴다. */
[data-theme="night"] body {
  text-shadow: 0 0 4px rgba(140,195,255,.36), 0 0 13px rgba(80,150,235,.2);
  /* 컬럼 바깥 여백 — 시작 버튼과 같은 그라데이션.
     fixed 로 붙여 화면 전체를 한 장으로 훑게 한다 (스크롤해도 안 움직임). */
  background-color: #000;
  background-image: var(--grad-page);
  background-attachment: fixed;
}
/* 여백에도 노이즈 한 겹. 컬럼은 그 위에 올라온다. */
[data-theme="night"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--noise);
  opacity: .5; mix-blend-mode: overlay;
}
[data-theme="night"] .phone { position: relative; z-index: 1; }

/* ── 색면: 흐르는 띠 · 시작 버튼 · CTA ── */
/* #start 는 shell.css 에서 absolute 로 가운데 놓인다 — position 을 건드리면 안 된다 */
[data-theme="night"] .ticker,
[data-theme="night"] .cta { position: relative; }
[data-theme="night"] .ticker,
[data-theme="night"] #start,
[data-theme="night"] .cta {
  background-color: #0b1b33;
  background-image: var(--grad);
  /* 글자를 80%로 눌러 면 위에 얹힌 게 아니라 배어 있는 것처럼.
     아주 옅은 번짐을 둘러 물기 어린 빛처럼 보이게 한다. */
  color: rgba(234,244,255,.8);
  text-shadow: 0 0 5px rgba(150,205,255,.38), 0 0 12px rgba(90,160,240,.22);
  overflow: hidden;
}
[data-theme="night"] #start,
[data-theme="night"] .cta { background-image: var(--grad-btn); }
[data-theme="night"] .ticker::after,
[data-theme="night"] #start::after,
[data-theme="night"] .cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--noise);
  opacity: .58; mix-blend-mode: overlay;
}
/* 띠 글자가 노이즈 아래 깔리지 않게 */
[data-theme="night"] .ticker { position: relative; z-index: 0; }
/* 그라데이션 면이 이미 경계를 만든다 — 테두리를 두르면 상자처럼 보인다 */
[data-theme="night"] #start { border: 0; }
[data-theme="night"] .cta:active { color: var(--accent); }

/* 하드 도전 — 색면이 아니라 바탕 위 강조 글자. 깜빡임은 shell.css 그대로. */
[data-theme="night"] #toHard {
  background: var(--paper); background-image: none; color: var(--accent);
}
[data-theme="night"] #toHard::after { display: none; }
[data-theme="night"] #toHard:active { background: var(--gray); }

/* 확대 모드 — 이미 어두운 화면이라 대비만 손본다 */
[data-theme="night"] #zoomOverlay { background: rgba(2,5,10,.94); }
/* 판 자체가 검정이라 테두리를 두르면 어둠 위에 파란 상자만 뜬다 */
[data-theme="night"] #zoomInner canvas { outline: none; }
[data-theme="night"] #zoomBtn { background: rgba(140,190,255,.20); }
[data-theme="night"] #zoomBtn:active { background: rgba(140,190,255,.34); }

/* 입력 — 어두운 바탕에서 회색 배경은 너무 밝다 */
[data-theme="night"] #guess,
[data-theme="night"] #word { background: var(--gray); color: var(--ink); }
[data-theme="night"] #submit,
[data-theme="night"] #hintRow > button,
[data-theme="night"] #examples > button { background: var(--paper); color: var(--ink); }
[data-theme="night"] #submit:active,
[data-theme="night"] #hintRow > button:active,
[data-theme="night"] #examples > button:active { background: var(--gray); }

/* 정보 아코디언 */
[data-theme="night"] button#puzzleNo { background: var(--paper); color: var(--ink); }
[data-theme="night"] button#puzzleNo:active { background: var(--gray); }
[data-theme="night"] .info-item { background: var(--gray); color: var(--ink); }
[data-theme="night"] .info-item:active { background: var(--press); }