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 × 378.95의 1칸 */
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10; overflow: hidden;
  background: #bdf5f2 url("sky.png") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  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 img, #start-bar { position: absolute; pointer-events: none; image-rendering: pixelated; }   /* 게임처럼 도트 그대로 키운다(게임 그림은 Point) */
#start-title { opacity: 0; transition: opacity .25s ease-out; }
#start-title.shown { opacity: 1; }

/* «화면을 눌러 시작» — 게임 글자처럼 검은 글씨 · 하늘 · 구름 위에서도 읽히게 흰 테두리 */
#start-tap {
  position: absolute; left: 0; right: 0; transform: translateY(-50%);
  text-align: center; 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: nemostar-blink 1.1s steps(1, end) infinite; }
@keyframes nemostar-blink { 0% { opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; } }

/* 컴퓨터 조작 키 — 마우스 · 트랙패드가 있는 기기(PC · 크롬북)에서만. 터치만 되는 태블릿 · 폰은 화면 버튼이 있어 숨긴다 */
#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 (any-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: #fff089; 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: #fff089; }   /* nth-of-type: span 중 몇 번째(이름표가 1번) */
#start-keys .key-item:nth-of-type(3) kbd { background: #fdc9c9; }
#start-keys .key-item:nth-of-type(4) kbd { background: #bdf5f2; }
#start-keys .key-item:nth-of-type(5) kbd { background: #fff089; }
#start-keys .key-item:nth-of-type(6) kbd { background: #fdc9c9; }

#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; }