/* 게임 화면의 바깥 테두리를 "장난감 상자" 디자인으로 (2026-10-03~)
 *
 * 게임 21개는 각자 인라인 <style> 에서 같은 이름의 색 변수(--bg, --panel, --text, --muted …)를
 * 정의하고 그 변수로 화면을 그린다. 그래서 변수를 밝은 쪽으로 한꺼번에 뒤집으면
 * 바탕과 글자가 함께 바뀌어 대비가 유지된다. 이 파일은 인라인 스타일보다 뒤에 불러야 이긴다.
 * 게임판 캔버스 안의 그림은 건드리지 않는다.
 */
:root {
  --bg: #FFD84D;
  --panel: #FFFFFF;
  --grid: #FFF1C7;
  --text: #1B1B1F;
  --muted: #55555F;
  --gold: #D9480F;        /* 흰 바탕 위 강조 글자. 원래 금색은 흰 바탕에서 안 읽힌다 */
  --ink: #1B1B1F;
  --font-fun: "Jua", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

html body {
  color: var(--ink);
  background: #FFD84D repeating-linear-gradient(-45deg, #FFD84D 0 22px, #FFCF26 22px 44px);
}

body header h1 { font-family: var(--font-fun); font-weight: 400; font-size: 34px; text-shadow: 3px 3px 0 #fff; }
body header h1 span { color: #E0402C; }
body p.sub { color: var(--ink); font-weight: 500; }

body .score-box { background: #fff; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
body .score-box .label { color: var(--muted); }
body .score-box .value { font-family: var(--font-fun); font-weight: 400; font-size: 24px; color: #E0402C; }

/* 게임판 상자 */
body #stage, body .board-wrap, body .stage { border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }

/* 위쪽 이동 줄과 아래 버튼 */
body .game-top a {
  background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-fun); font-size: 15px;
}
body .controls button, body #restart-btn, body #new-btn {
  background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-fun); font-weight: 400; font-size: 16px;
}
body .controls button:active, body #restart-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

body .hint { color: var(--ink); opacity: .8; }
body .back-link {
  background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-fun); font-size: 15px;
}

/* 아래 설명 글: 흰 종이 */
body .game-guide {
  background: #fff; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--ink);
  padding: 22px 20px 18px; color: #33333B;
}
body .game-guide h2, body .game-guide h3 { font-family: var(--font-fun); font-weight: 400; color: var(--ink); font-size: 21px; }
body .game-guide h3 { font-size: 18px; }
body .game-guide strong { color: var(--ink); background: linear-gradient(transparent 62%, #FFE38A 62%); }
body .game-guide a { color: #E0402C; }

/* 업적 줄·여우 친구 고르기: achievements.js·fox.js 가 어두운 색을 직접 넣으므로 body 를 붙여 이긴다 */
body .ach-strip h2 { font-family: var(--font-fun); font-weight: 400; font-size: 18px; letter-spacing: 0; color: var(--ink); }
body .ach-item { background: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
body .ach-item.on { background: #E3F8EE; border-color: var(--ink); }
body .ach-item .t { color: var(--ink); font-family: var(--font-fun); font-weight: 400; font-size: 15px; }
body .ach-item.off .t { color: #55555F; }
body .ach-item .s { color: #55555F; }
body .ach-item .a { color: #B86E00; }
body .ach-item.off .a { color: rgba(184,110,0,0.5); }
body .ach-toast { background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
body .ach-toast .ach-h { color: #2E9E6B; }
body .ach-toast .ach-d { color: #55555F; }
body .ach-toast .ach-a { color: #B86E00; }
body .fox-skin { background: #fff; border: 2px solid var(--ink); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
body .fox-skin.on { background: var(--bg); color: var(--ink); border-color: var(--ink); }
body .fox-skin.locked canvas { filter: grayscale(1) brightness(0.9) opacity(.5); }