/* 눈코입 오락실 공통 — 레트로 오락실: 검은 바탕 + 고정 팔레트 16색(--p0..--p15). 라이트/다크 구분 없이 하나.
   외부 글꼴 없음: 제목·숫자는 직접 만든 도트 글자(common/pixel.js), 본문은 기기 글꼴. */
:root {
  color-scheme: dark;
  --p0: #0B0B14; --p1: #1B1B38; --p2: #3B3B6B; --p3: #8A8AB0; --p4: #F2F2F7; --p5: #FF3B5C; --p6: #FF9F1C; --p7: #FFE45E;
  --p8: #3DDC84; --p9: #2EE6D6; --p10: #3D7BFF; --p11: #A56BFF; --p12: #FF6BD6; --p13: #8A5A3C; --p14: #FFC8A0; --p15: #7A1F3D;
  --font: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  --bg: var(--p0);
  --surface: var(--p1);
  --field: #10101F;
  --text: var(--p4);
  --muted: #A9A9CC;
  --accent: var(--p7);
  --accent-text: var(--p0);
  --border: var(--p2);
  --danger: var(--p5);
  --ball: var(--p4);
  --paddle: var(--p9);
  --brick-0: var(--p5); --brick-1: var(--p6); --brick-2: var(--p7); --brick-3: var(--p8); --brick-4: var(--p10);
  --card-bg: #0B0B14; --card-text: #F2F2F7; --card-accent: #FFE45E;
  --shadow: 0 4px 0 #000;
}

/* ---- 공통 바탕 ---- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font);
  display: flex; flex-direction: column; height: 100dvh;
}
body[data-screen="game"], body[data-screen="cal"], body[data-screen="play"], body[data-screen="wink"] { -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
#app { flex: 1; min-height: 0; width: 100%; max-width: 1100px; margin: 0 auto; }
[hidden] { display: none !important; }
a { color: var(--accent); }
.screen { height: 100%; display: flex; flex-direction: column; padding: 8px 12px; padding-bottom: max(8px, env(safe-area-inset-bottom)); overflow-y: auto; }
.screen.doc { max-width: 640px; margin: 0 auto; line-height: 1.55; }
.screen.doc h1 { font-size: 24px; } .screen.doc h2 { font-size: 17px; margin-top: 22px; }
.muted { color: var(--muted); }

.start-box, .result-box { margin: auto; width: min(440px, 100%); display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; padding: 8px 0; }
.title { font-size: 40px; margin: 0; color: var(--accent); letter-spacing: 0; text-shadow: 3px 3px 0 var(--p5); }
.title.small { font-size: 24px; letter-spacing: 0; line-height: 1.3; }
.rule { margin: 0 0 4px; color: var(--muted); line-height: 1.5; }
.cam-note { margin: 0; font-size: 14px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 8px 10px; }
.photo-note { margin: 0; color: var(--muted); font-size: 12px; }
.notice { margin: 0; color: var(--muted); font-size: 12px; }
.share-note { margin: 0; color: var(--muted); font-size: 12px; text-align: center; word-break: keep-all; }
.cam-pick { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.cam-pick select { font: inherit; font-size: 14px; max-width: 100%; color: var(--text); background: var(--surface); border: 2px solid var(--border); border-radius: 0; padding: 6px 8px; }
.cam-pick[hidden], .cam-pick select[hidden], .cam-pick-hint[hidden] { display: none; }
.next-board, .best { margin: 0; color: var(--muted); font-size: 14px; }
.btn {
  font: inherit; font-size: 18px; font-weight: 700; padding: 14px 16px; border-radius: 0; cursor: pointer;
  border: 3px solid var(--border); background: var(--surface); color: var(--text); box-shadow: 0 4px 0 #000;
}
.btn.primary { background: var(--p7); border-color: var(--p7); color: var(--p0); box-shadow: 0 4px 0 #A8860A, 0 4px 0 1px #000; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); font-weight: 500; box-shadow: none; }
.btn.small { font-size: 14px; padding: 8px 12px; border-radius: 0; }
.btn:disabled { opacity: .6; cursor: default; }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.btn:focus-visible, .mode:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.cam-box {
  position: fixed; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: 132px; height: 99px; z-index: 5;
  border-radius: 0; overflow: hidden; border: 2px solid var(--border); background: #000;
}
.cam-box video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.cam-box.off { width: 1px; height: 1px; opacity: 0; border: 0; pointer-events: none; overflow: hidden; }
.cam-box.off video { opacity: 0; }
/* 숨김 속성이 있어도 display:none 은 쓰지 않는다 — 안 보이는 video 는 안드로이드 크롬이 프레임을 멈출 수 있다 */
.cam-box[hidden] { display: block !important; width: 1px; height: 1px; opacity: 0; border: 0; pointer-events: none; overflow: hidden; }
.face-check { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: var(--muted); cursor: pointer; padding: 6px 0; }
.face-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.cam-dot { position: absolute; left: 6px; top: 2px; color: #E53935; font-size: 12px; }
@media (min-width: 900px) { .cam-box { width: 176px; height: 132px; } .dock { padding-right: 190px; min-height: 0; } }
.result-mode { margin: 0; color: var(--muted); }
.result-score { margin: 0; font-size: 72px; line-height: 1; color: var(--accent); }
.result-score small { font-size: 24px; margin-left: 4px; color: var(--text); }
.result-detail { margin: 0; font-size: 18px; font-weight: 600; }
.share-msg { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--muted); }

/* 광고 자리: 켜기 전엔 보이지 않는다(애드센스 코드를 켜지 않음). 켜면 data-on 이 붙는다 */
.ad-slot { display: none; }
.ad-slot[data-on] { display: flex; align-items: center; justify-content: center; min-height: 100px; }

.rule, .title.small, .cam-note { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-height: 700px) {
  .title { font-size: 36px; } .start-box, .result-box { gap: 8px; }
  .btn { padding: 11px 14px; font-size: 16px; } .result-score { font-size: 56px; }
}
/* 위 띠: 처음으로 가는 길 + 소리 켜기/끄기 (모든 화면) */
.topbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 2px 8px; }
.topbar a { font-size: 14px; text-decoration: none; padding: 10px 6px; }
.sound-btn { font: inherit; font-size: 20px; line-height: 1; width: 44px; height: 44px; border-radius: 0; border: 3px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 #000; }
.sound-btn[aria-pressed="false"] { opacity: .7; }
.sound-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.other-games { display: flex; flex-direction: column; gap: 6px; }
.other-games a.btn { text-decoration: none; text-align: center; display: block; }

/* 공용 이름표·아래 탭(허브 bar.js)은 카메라가 보이는 화면(보정·게임·눈싸움 판)에선 숨긴다 */
body[data-screen="cal"] .ola-top, body[data-screen="cal"] .ola-tabbar, body[data-screen="cal"] .ola-pop,
body[data-screen="game"] .ola-top, body[data-screen="game"] .ola-tabbar, body[data-screen="game"] .ola-pop,
body[data-screen="play"] .ola-top, body[data-screen="play"] .ola-tabbar, body[data-screen="play"] .ola-pop,
body[data-screen="wink"] .ola-top, body[data-screen="wink"] .ola-tabbar, body[data-screen="wink"] .ola-pop { display: none !important; }
body[data-screen="cal"].ola-has-tabs, body[data-screen="game"].ola-has-tabs, body[data-screen="play"].ola-has-tabs, body[data-screen="wink"].ola-has-tabs { padding-bottom: 0; }

/* ================= 레트로 오락실 덧씌움 ================= */
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.px-canvas { display: block; margin: 0 auto; max-width: 100%; height: auto; image-rendering: pixelated; }
.px-icon { display: inline-block; vertical-align: middle; image-rendering: pixelated; }
h1.title:has(.px-canvas), h2.title:has(.px-canvas) { text-shadow: none; }
.px-banner { margin: 0 auto; }
.title, .result-score, .hud-value, .big { font-family: var(--mono); }
.result-score { text-shadow: 4px 4px 0 var(--p5); }
.cam-note { border: 2px solid var(--p2); background: var(--p1); }
.ad-slot[data-on] { background: var(--p1); border: 2px solid var(--p2); }
.hud-label { letter-spacing: 1px; }
.hud-value { text-shadow: 2px 2px 0 #000; }
#lives { display: inline-flex; gap: 3px; align-items: center; min-height: 18px; }
.coin-line { margin: 0 auto; display: flex; gap: 8px; align-items: center; justify-content: center; }

.fail-gray { filter: grayscale(1) brightness(.8); transform: translateY(5px) scaleY(.97); transform-origin: 50% 100%; transition: filter .12s, transform .35s ease-in; }
@media (prefers-reduced-motion: reduce) { .fail-gray { transition: none; } }

/* 스캔라인: 아주 옅은 가로줄 한 장. 움직이지 않고 번쩍이지 않는다. 움직임 줄이기 설정이면 끈다 */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 3px, rgba(0, 0, 0, .13) 3px, rgba(0, 0, 0, .13) 4px);
}
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }
/* 깜빡이는 글자(INSERT COIN 류): 한 번 깜빡이는 데 2초(= 0.5Hz), 광과민 기준(초당 3번)보다 훨씬 느리다. 움직임 줄이기면 멈춘다 */
.blink-slow { animation: blink-slow 2s steps(1, end) infinite; }
@keyframes blink-slow { 0%, 70% { opacity: 1; } 70.01%, 100% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .blink-slow { animation: none; } }
.other-games .px-icon { margin-right: 8px; }
/* 게임 시작 전 방법 안내 (common/howto.js) */
.howto { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.howto-box { width: min(440px, 100%); display: flex; flex-direction: column; gap: 14px; align-items: stretch; text-align: center; }
.howto-icons { display: flex; gap: 14px; justify-content: center; align-items: center; min-height: 40px; flex-wrap: wrap; }
.howto-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 17px; font-weight: 700; line-height: 1.4; word-break: keep-all; }
.howto-lines li { background: var(--surface); border: 2px solid var(--border); padding: 8px 10px; }
.howto-skip { font-size: 14px; color: var(--muted); }

/* 난이도 표시(도트 별 3개) */
.level-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.level-badge .level-text { margin-right: 3px; font-weight: 700; }
.level-star { display: inline-block; }
.start-box > .level { margin: -4px 0 0; text-align: center; }

/* ---- 손가락 모드 (사용자 10-13): 시작 화면에서 「손가락」을 골랐을 때만. 카메라 전용 칸은 숨기고, 판 위 터치는 스크롤하지 않는다 ---- */
.finger-note { display: none; margin: 0; font-size: 14px; font-weight: 600; background: var(--surface); border: 2px solid var(--p2); border-radius: 0; padding: 8px 10px; word-break: keep-all; overflow-wrap: anywhere; }
body[data-input="finger"] .cam-note { display: none; }
body[data-input="finger"] .finger-note { display: block; }
body[data-input="finger"] .face-check, body[data-input="finger"] .cam-pick,
body[data-input="finger"] #btn-preview, body[data-input="finger"] #btn-recenter, body[data-input="finger"] #btn-recal { display: none !important; }
body[data-input="finger"] .field-wrap { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.modes .mode[data-mode="finger"]:last-child:nth-child(odd) { grid-column: 1 / -1; }
.finger-pad { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px 4px 0; }
.finger-pad button { touch-action: none; -webkit-user-select: none; user-select: none; font: inherit; font-size: 26px; font-weight: 900; min-height: 56px; color: var(--text); background: var(--surface); border: 3px solid var(--border); border-radius: 0; cursor: pointer; }
.finger-pad button.on { background: var(--p10); color: #fff; transform: translateY(3px); }
@media (max-height: 700px) { .finger-pad button { min-height: 48px; font-size: 22px; } }

/* ---- 게임 안내(사용자 10-21): 시작 화면 안의 정적 본문. 시작 화면 밖(게임·결과)에서는 #screen-start 와 함께 숨는다 ---- */
.guide { margin: 8px 0 0; padding: 10px 12px 4px; text-align: left; font-size: 14px; line-height: 1.6; color: var(--muted); background: var(--surface); border: 2px solid var(--border); word-break: keep-all; overflow-wrap: anywhere; }
.guide h2 { margin: 12px 0 4px; font-size: 15px; color: var(--p9); }
.guide h2:first-child { margin-top: 2px; }
.guide p, .guide ul, .guide dl { margin: 0 0 6px; }
.guide ul { padding-left: 1.2em; }
.guide b { color: var(--text); }
.guide dt { color: var(--text); font-weight: 700; margin-top: 6px; }
.guide dt::before { content: "Q. "; color: var(--p7); }
.guide dd { margin: 0 0 4px; }