html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; overscroll-behavior: none; }

/* 게임 글꼴(메이플스토리체 · 웹 임베딩 허용) — 시작 화면에 쓰는 글자만 잘라 넣었다(Tools/WebTemplate/make_start_assets.py) */
@font-face { font-family: "NemoMaple"; src: url("fonts/maple-light.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "NemoMaple"; src: url("fonts/maple-bold.woff2") format("woff2"); font-weight: 700; font-display: block; }

/* 게임 화면 — 어느 기기에서나 화면 가득(유니티가 이 크기에 맞춰 그린다) */
#unity-canvas {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block;
  background: #000; outline: none;
  touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}

/* «눌러서 시작» 화면 — 게임 타이틀 화면과 같은 흰 바탕 · 색 네모 · 타이틀. 내려받는 동안 진행 막대, 다 되면 «화면을 눌러 시작» */
#start {
  --u: 1px;   /* 타이틀 화면 배율(layout()이 넣는다) — 기준 800 × 600(가로 맞춤)의 1칸 */
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10; overflow: hidden;
  background: #fff;   /* 메인 메뉴 «Sky» — 그림 없는 흰 칸 */
  cursor: pointer;
  font-family: "NemoMaple", sans-serif; color: #1a1a1a;
  touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: opacity .3s ease-out;
}
#start.leaving { opacity: 0; pointer-events: none; }
#start-art { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; }
#start img, #start-bar, #start-art > div { position: absolute; pointer-events: none; image-rendering: pixelated; }   /* 게임처럼 도트 그대로 키운다(게임 그림은 Point) */

/* 배경 네모 — 게임 그림은 60칸 안 가운데 54칸이 한 색(가장자리 3칸 투명)이라 같은 비율의 색 칸으로 그린다(색 = 그림 색 × Image 색) */
#start-art .sq::before { content: ""; position: absolute; left: var(--i); top: var(--i); right: var(--i); bottom: var(--i); background: var(--c); }

/* 타이틀 바탕(물감 덩어리) — 그림 넷을 세로로 이은 한 장을 1초에 12장씩 넘긴다(게임 TitleBack 애니메이션과 같은 박자) */
#start-titleback {
  background: url("title-back.png") 0 0 / 100% 400% no-repeat;
  opacity: 0; transition: opacity .25s ease-out;
  animation: nemowarriors-titleback .33333s steps(4, end) infinite;
}
@keyframes nemowarriors-titleback { from { background-position: 0 0%; } to { background-position: 0 133.333%; } }
#start-titleback.shown { opacity: 1; }

/* 이름 «네모 / 와 / 감정의 / 용사들» — 도트가 아니라 손글씨 그림이라 미리 부드럽게 줄여 두고(make_start_assets.py) 부드럽게 그린다 */
#start img.name { image-rendering: auto; opacity: 0; transition: opacity .25s ease-out; }
#start img.name.shown { opacity: 1; }

/* «화면을 눌러 시작» — 메인 메뉴 버튼 줄 가운데(layout()이 자리를 넣는다) · 검은 글씨에 흰 테두리 */
#start-tap {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; white-space: nowrap; font-weight: 700; font-size: calc(var(--u) * 23); line-height: 1.2; letter-spacing: .02em;
  --o: calc(var(--u) * 1.5);
  text-shadow:
    calc(var(--o) * -1) 0 #fff, var(--o) 0 #fff, 0 calc(var(--o) * -1) #fff, 0 var(--o) #fff,
    calc(var(--o) * -1) calc(var(--o) * -1) #fff, var(--o) calc(var(--o) * -1) #fff,
    calc(var(--o) * -1) var(--o) #fff, var(--o) var(--o) #fff;
  visibility: hidden; pointer-events: none;
}
#start.ready #start-bar { visibility: hidden; }
#start.ready #start-tap { visibility: visible; animation: nemowarriors-blink 1.1s steps(1, end) infinite; }
@keyframes nemowarriors-blink { 0% { opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; } }
/* 문구 — 마우스 · 트랙패드가 주 입력인 기기(PC · 크롬북)는 키로도 시작하니 «화면 또는 아무 키나», 터치 화면이 주 입력인 태블릿 · 폰은 «화면을 눌러»
   (아래 조작 키 패널과 같은 규칙 · 키로 시작하는 건 어느 기기든 된다 — 문구만 나눈다)
   «주 포인터»(pointer)로 가른다 — «하나라도»(any-pointer)는 삼성 태블릿 · 폰이 키보드 · 마우스 없이도 fine으로 답한다
   (삼성 터치 화면 드라이버가 정밀 포인터 · 호버도 있다고 알림 · 네모와 별에서 성민 갤럭시 탭 S5e에 PC 조작 키가 떴다 — 2026-11-11) */
#start-tap .tap-pc { display: none; }
@media (pointer: fine) { #start-tap .tap-touch { display: none; } #start-tap .tap-pc { display: inline; } }

/* 컴퓨터 조작 키 — 마우스 · 트랙패드가 주 입력인 기기(PC · 크롬북)에서만(위 문구와 같은 규칙 · pointer). 터치 화면이 주 입력인 태블릿 · 폰은 화면 버튼이 있어 숨긴다 */
#start-keys {
  position: absolute; left: 50%; bottom: calc(var(--u) * 10); transform: translateX(-50%);
  display: none; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: calc(var(--u) * 5) calc(var(--u) * 16);
  width: max-content; max-width: calc(100vw - var(--u) * 24); box-sizing: border-box;   /* left 50%면 폭이 절반으로 묶여 접힌다 — 내용만큼 */
  padding: calc(var(--u) * 9.5) calc(var(--u) * 16) calc(var(--u) * 6.5);   /* 위는 이름표 탭이 걸친 만큼 더 */
  background: rgba(255, 255, 255, .92);
  border: calc(var(--u) * 1.6) solid #000; border-radius: calc(var(--u) * 7);
  font-size: calc(var(--u) * 12); line-height: 1; white-space: nowrap; pointer-events: none;
}
@media (pointer: fine) { #start-keys { display: flex; } }
#start.error #start-keys { display: none; }
/* 이름표 «PC 조작 키» — 상자 위 테두리에 걸친 탭(터치 기기도 되는데 «키보드만 되나?» 헷갈리지 않게) */
#start-keys .keys-title {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -62%);
  padding: calc(var(--u) * 3) calc(var(--u) * 9);
  background: #f8f644; border: calc(var(--u) * 1.4) solid #000; border-radius: calc(var(--u) * 20);
  font-weight: 700; font-size: calc(var(--u) * 9.5); line-height: 1; letter-spacing: .03em;
}
#start-keys .key-item { display: inline-flex; align-items: center; gap: calc(var(--u) * 3); }
#start-keys b { font-weight: 400; margin-left: calc(var(--u) * 2); }
#start-keys kbd {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: calc(var(--u) * 18.5); height: calc(var(--u) * 18.5); padding: 0 calc(var(--u) * 4);
  font-family: inherit; font-weight: 700; font-size: calc(var(--u) * 10.5);
  background: #fff; color: #1a1a1a;
  border: calc(var(--u) * 1.3) solid #000; border-bottom-width: calc(var(--u) * 3.2);
  border-radius: calc(var(--u) * 4);
}
#start-keys kbd.wide { padding: 0 calc(var(--u) * 6); }
#start-keys kbd.arrow { font-size: calc(var(--u) * 14); padding-bottom: calc(var(--u) * 1); }   /* 글꼴 화살표가 가늘어서 크게 */
/* 키 색 — 타이틀 네모 · 물감 네 색(노랑 · 분홍 · 하늘 · 보라파랑)을 돌려 쓴다 */
#start-keys .key-item:nth-of-type(2) kbd { background: #f8f644; }   /* nth-of-type: span 중 몇 번째(이름표가 1번) */
#start-keys .key-item:nth-of-type(3) kbd { background: #fad6ff; }
#start-keys .key-item:nth-of-type(4) kbd { background: #acf7f2; }
#start-keys .key-item:nth-of-type(5) kbd { background: #8aa1f6; }
#start-keys .key-item:nth-of-type(6) kbd { background: #f8f644; }

#start-error {
  display: none; position: absolute; left: 8%; right: 8%; top: 70%;
  font-weight: 700; font-size: calc(var(--u) * 13); line-height: 1.5; text-align: center; white-space: pre-line;
  text-shadow: -2px 0 #fff, 2px 0 #fff, 0 -2px #fff, 0 2px #fff;
}
#start.error #start-bar, #start.error #start-tap { visibility: hidden; animation: none; }
#start.error #start-error { display: block; }
#start.error { cursor: default; }

/* 세이브가 안 되는 브라우저 알림(사이트 데이터 차단 등) */
#start-note {
  display: none; position: absolute; left: 6%; right: 6%; top: calc(var(--u) * 8);
  font-weight: 700; font-size: calc(var(--u) * 10); line-height: 1.4; text-align: center;
  text-shadow: -1px 0 #fff, 1px 0 #fff, 0 -1px #fff, 0 1px #fff;
}

/* 메모리 진단 아이콘 — «Show Diagnostics Overlay»를 켠 빌드에서만, 시작한 뒤에 */
#diagnostics-icon { display: none; position: fixed; right: 6px; bottom: 6px; width: 28px; height: 28px; z-index: 5; opacity: .6; }

/* 유니티 경고(주소에 ?dev일 때만) */
#unity-warning { position: fixed; left: 50%; top: 4%; transform: translate(-50%); z-index: 20; max-width: 90%; font: 13px/1.4 sans-serif; }
#unity-warning div { background: #fff3a8; color: #222; padding: 8px 12px; margin-bottom: 4px; border-radius: 4px; }

input, textarea { -webkit-user-select: text; user-select: text; }