html.offline {
  background-color: #fff;
  transition: filter 1.5s cubic-bezier(0.65, 0.05, 0.36, 1),
              background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
  will-change: filter, background-color;
}

body {
  background-color: #fff;
  color: #5f6368;
  font-family: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Segoe UI',
               Roboto, sans-serif;
  font-size: 15px;
  margin: 0;
}

/* 밤 모드: 페이지 전체 색 반전. */
html.offline.inverted {
  background-color: #fff;
  filter: invert(1);
}

html.offline.inverted body {
  background-color: #fff;
}

.hidden {
  display: none;
}

.interstitial-wrapper {
  box-sizing: border-box;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 600px;
  padding-top: 100px;
  position: relative;
  width: 100%;
}

/* 캐릭터 선택 화면일 때는 게임 캔버스(600px) 폭 제한 없이 화면을 넓게 쓴다 -
   레퍼런스처럼 모니터를 꽉 채우는 큰 느낌을 위해서다. */
body.char-select:not(.game-started) .interstitial-wrapper {
  max-width: 1400px;
  padding-top: 140px;
}

/* 시작 전: 타이틀/캐릭터 선택 화면만 보인다. 스페이스바를 누르면 게임 화면으로 바뀐다. */
body:not(.game-started) .runner-container {
  visibility: hidden;
}

.game-started #main-content {
  opacity: 0;
  pointer-events: none;
}

/*
 * 타이틀 화면. .interstitial-wrapper의 600px 폭 제한과 무관하게 기기 화면 전체를
 * position:fixed로 덮는다. 포스터는 Figma 시안(시작화면 시안, 1920x1080=16:9)과 같은
 * 비율로 고정해서 화면 아래쪽에 붙이고, 위로 남는 자리는 하늘색(#60A5E9)으로 채운다 -
 * 세로로 긴 화면(휴대폰)에서도 원래 시안과 비슷한 구도가 유지된다.
 */
#title-screen {
  background: #60a5e9;
  height: 100vh;
  height: 100dvh;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 20;
}

/*
 * 포스터가 화면 전체(가로·세로 다)를 항상 빈틈없이 채운다 - 여백을 만드는 대신
 * (letterbox), 화면 비율이 16:9와 달라서 남는 쪽을 사진 자체를 그만큼 잘라서
 * 채운다(아래 .title-bg의 object-fit:cover). 타이틀 글자·구름·PRESS START가
 * 전부 이 포스터 기준 top:%로 배치돼 있어서(.title-sub/.title-main/.press-start
 * 등), 포스터가 항상 화면 전체 크기와 같아야 그 글자들도 화면 어디서 봐도 같은
 * 높이에 보인다.
 */
#title-poster {
  bottom: 0;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

/*
 * object-fit:cover로 화면 비율에 안 맞는 쪽을 사진에서 잘라낸다. 건물·PRESS
 * START가 있는 아래쪽은 항상 보여야 하니 세로 방향 기준점은 bottom - 세로로
 * 긴 화면(휴대폰)에서 남는 부분은 하늘/구름 쪽(위쪽)부터 잘린다.
 */
.title-bg {
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: center bottom;
  position: absolute;
  top: 0;
  width: 100%;
}

/* 하늘에 떠 있는 구름. 좌우로 오간다 - 눈에 띄게 움직이도록 이동 폭을 넉넉히 잡았다. */
.title-cloud {
  image-rendering: pixelated;
  pointer-events: none;
  position: absolute;
}

.title-cloud-1 {
  animation: cloud-drift 5s ease-in-out infinite;
  left: 4%;
  top: 22%;
  width: clamp(64px, 9vw, 170px);
}

.title-cloud-2 {
  animation: cloud-drift 7s ease-in-out infinite -2s;
  right: 6%;
  top: 20%;
  width: clamp(72px, 11vw, 210px);
}

.title-cloud-3 {
  animation: cloud-drift 4.5s ease-in-out infinite -1s;
  left: 46%;
  top: 28%;
  width: clamp(40px, 5.5vw, 100px);
}

@keyframes cloud-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(32px); }
}

.title-sub,
.title-main {
  color: #202124;
  font-family: 'Press Start 2P', monospace;
  left: 0;
  margin: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

.title-sub {
  font-size: clamp(8px, 1.4vw, 22px);
  letter-spacing: 0.3em;
  top: 12%;
}

.title-main {
  /* 최솟값을 너무 높이 두면(예: 30px) 포스터가 16:9 비율로 작아지는 좁은 화면에서
     그림에 비해 글자가 상대적으로 커져 용산역 건물과 겹친다 - vw 비례를 그대로 따르게 낮춘다. */
  font-size: clamp(14px, 5vw, 88px);
  line-height: 1.25;
  top: 17%;
}

/* 박스 없이 텍스트만 - 클릭 가능한 버튼임을 알리려고 위아래로 살짝 움직인다. */
.press-start {
  animation: press-start-bounce 1s ease-in-out infinite;
  background: none;
  border: none;
  bottom: 6%;
  color: #fff;
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(10px, 1.6vw, 22px);
  left: 50%;
  letter-spacing: 0.2em;
  padding: 0.4em 0.8em;
  position: absolute;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.65), 0 0 10px rgba(0, 0, 0, 0.45);
}

@keyframes press-start-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -8px); }
}

/*
 * 초기화면 회사 공지 팝업 (실험용, 피그마 "메모" 참고). 옛날 윈도우 대화상자 느낌으로
 * 만들었다 - 개수는 js/notices.js의 NOTICES 배열에 달렸고, 여러 개면 왼쪽 위부터
 * 나란히 놓이다가 좁은 화면에서는 줄바꿈된다. 정중앙을 가리지 않게 가장자리 쪽에 둔다.
 */
/* 팝업이 없는 빈 자리는 클릭이 그대로 통과해야 한다 (안 그러면 화면 전체를 덮어
   PRESS START 같은 뒤쪽 버튼이 안 눌린다) - 실제 팝업(.notice-popup)에서만 다시 받는다. */
.notice-board {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  inset: 0;
  justify-content: flex-start;
  padding: 40vh 4vw 16px;
  pointer-events: none;
  position: absolute;
  z-index: 25;
}

.notice-popup {
  background: #d4d0c8;
  border: 2px solid #0a0a0a;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  width: min(88vw, 320px);
}

.notice-popup.notice-dragging {
  box-shadow: 6px 10px 18px rgba(0, 0, 0, 0.45);
  z-index: 30;
}

/* 제목바를 잡아 끌면 팝업을 옮길 수 있다. */
.notice-titlebar {
  align-items: center;
  background: linear-gradient(90deg, #0a246a, #3a6ea5);
  cursor: grab;
  display: flex;
  justify-content: space-between;
  min-height: 14px;
  padding: 6px 6px 6px 10px;
  touch-action: none;
  user-select: none;
}

.notice-dragging .notice-titlebar {
  cursor: grabbing;
}

.notice-title {
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-close {
  background: #d4d0c8;
  border: 1px solid #0a0a0a;
  color: #0a0a0a;
  cursor: pointer;
  flex: none;
  font-size: 0.85em;
  font-weight: 700;
  height: 20px;
  line-height: 1;
  padding: 0;
  width: 20px;
}

.notice-close:hover {
  background: #eee;
}

.notice-body {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px;
}

.notice-heading {
  color: #0a0a0a;
  font-size: 1.05em;
  font-weight: 700;
  margin: 0;
  text-align: center;
}

.notice-photo {
  border: 2px solid #0a0a0a;
  display: block;
  height: 120px;
  object-fit: cover;
  width: 120px;
}

.notice-text {
  color: #202124;
  font-size: 0.95em;
  line-height: 1.5;
  margin: 0;
  text-align: center;
  white-space: pre-line;
}

/* 캐릭터 선택 화면 (두 번째 화면). */
#character-screen {
  padding: 32px 0 8px;
  text-align: center;
}

/*
 * 카드가 화면보다 많아지면 문서 자체가 아래로 늘어나면서 브라우저 스크롤이
 * 생기고, 동시에 #character-picker 도 자기 스크롤이 걸려서 "이중 스크롤"이
 * 됐었다 - 타이틀 화면(#title-screen)과 같은 방식으로 이 화면을 모니터
 * 높이에 고정(position:fixed + overflow:hidden)해서 페이지 자체는 절대
 * 늘어나지 않게 한다.
 */
body.char-select:not(.game-started) #character-screen {
  height: 100vh;
  height: 100dvh;
  left: 0;
  overflow: hidden;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100vw;
}

/*
 * 제목·부제·카드 묶음 전체를 화면 높이 기준으로 가운데 정렬한다 - 위아래
 * 패딩을 똑같이 주고 justify-content:center로 실제 중앙 배치는 flex가
 * 계산하게 둔다(패딩만으로 맞추면 캐릭터 수가 바뀔 때마다 값을 다시
 * 맞춰야 한다).
 */
body.char-select:not(.game-started) .character-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding: 40px 24px;
}

/*
 * flex: 1 로 두면 카드가 몇 장이든 상관없이 항상 "남는 공간 전부"를
 * 차지해버려서, 카드가 적을 때도 그 큰 상자 안에서 카드 묶음이 아래로
 * 처지는 것처럼 보였다(justify-content:center는 이 상자를 채운
 * .character-preview/.character-name을 중앙에 놨을 뿐, 상자 자체가 이미
 * 컸다). flex-grow를 0으로 두면(=flex-basis auto, 기본값) 카드 내용만큼만
 * 자라서 위 .character-panel의 justify-content:center가 제목+부제+카드
 * 묶음 전체를 화면 중앙에 놓을 수 있다. min-height: 0 은 그대로 둬서,
 * 캐릭터가 아주 많아져 화면을 넘길 때는 이 요소만 줄어들며 자기 스크롤로
 * 넘어가게 한다.
 */
body.char-select:not(.game-started) #character-picker {
  flex-grow: 0;
  flex-shrink: 1;
  min-height: 0;
}

/*
 * 첫 화면(타이틀)과 같은 노을 배경을 재사용해서 두 화면이 한 장소처럼 이어지게 한다.
 * 사진 위에 어두운 그라데이션을 깔아 캐릭터 카드·글자가 묻히지 않게 한다.
 */
body.char-select:not(.game-started)::before {
  background: linear-gradient(
      to bottom, rgba(20, 12, 20, 0.55), rgba(20, 12, 20, 0.72)),
      url('assets/ui/title-bg.jpg') center / cover no-repeat;
  content: '';
  inset: 0;
  position: fixed;
  z-index: -1;
}

/* body 자체의 흰 배경(위 body 규칙)은 body 내용 높이만큼만 칠해져서, 화면이 내용보다
   길면 그 밑으로 우리가 깐 배경이 비쳐 보이는 자리가 생긴다 - 이 화면에서는 꺼둔다. */
body.char-select:not(.game-started) {
  background-color: transparent;
}

/* 레퍼런스처럼 넉넉한 폭 안에서 전부 가운데 정렬한다. */
.character-panel {
  margin: 0 auto;
  max-width: 1300px;
}

/*
 * #character-screen p 처럼 id로 시작하는 규칙은 클래스 선택자(.team-title)보다
 * 우선순위가 높아서, 그냥 .team-title { margin: ... } 로만 두면 아래 #character-screen p
 * 규칙한테 margin이 덮여 세 텍스트 덩어리 사이 간격이 다 사라진다 - #character-screen을
 * 앞에 붙여 우선순위를 맞춰준다.
 */
#character-screen .team-title {
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.8em, 4.2vw, 3em);
  letter-spacing: 0.02em;
  margin: 0 0 28px;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

#character-screen h2 {
  color: #fff;
  font-size: 1.6em;
  font-weight: normal;
  line-height: 1.35em;
  margin: 0 0 16px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

#character-screen p {
  color: #fff;
  margin: 0;
}

kbd {
  background: #f1f3f4;
  border: 1px solid #dadce0;
  border-radius: 4px;
  color: #202124;
  font-family: inherit;
  font-size: 0.9em;
  padding: 1px 6px;
}

/* 게임 영역. 처음에는 티라노 너비만큼만 보인다. */
.runner-container {
  direction: ltr;
  height: 200px;
  max-width: 600px;
  overflow: hidden;
  position: absolute;
  top: 35px;
  width: 44px;
}

.runner-canvas {
  height: 200px;
  max-width: 600px;
  opacity: 1;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 10;
}

@keyframes intro {
  from { width: var(--intro-from-width); }
  to { width: var(--intro-to-width); }
}

.controller {
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 9;
}

/*
 * 점수 700마다 잠깐 밤이 되는 연출(runner.js updateNightMode()). 게임 캔버스는
 * 아케이드 모드에서 화면 폭에 맞춰서만 커지고 세로는 남을 수 있어서(레터박스),
 * 캔버스 안에다 딤을 그리면 그 캔버스 높이만큼만 어두워진다 - 그래서 캔버스 밖,
 * 모니터 전체를 덮는 별도 레이어로 만들고, 크롬 다이노처럼 부드럽게 전환한다.
 */
.night-overlay {
  background: rgba(8, 10, 30, 0.62);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 1.4s ease;
  z-index: 11;
}

.night-overlay.night-active {
  opacity: 1;
}

/* 아케이드 모드 (chrome://dino): 게임을 화면에 맞게 확대. */
.arcade-mode,
.arcade-mode .runner-container,
.arcade-mode .runner-canvas {
  image-rendering: pixelated;
  max-width: 100%;
  overflow: hidden;
}

.arcade-mode #main-content {
  opacity: 0;
  overflow: hidden;
}

.arcade-mode .interstitial-wrapper {
  height: 100vh;
  max-width: 100%;
  overflow: hidden;
}

.arcade-mode .runner-container {
  left: 0;
  margin: auto;
  right: 0;
  transform-origin: top center;
  transition: transform 250ms cubic-bezier(0.4, 0, 1, 1) 400ms;
  z-index: 2;
}

/* 캐릭터 선택. */
/* 캐릭터가 더 늘어나도 화면을 계속 아래로 늘리지 않고, 이 영역 안에서만
   스크롤한다 (실제 높이 제한은 위 body.char-select #character-picker의
   flex: 1 이 남는 공간만큼으로 준다 - 화면 크기가 달라져도 항상 맞는다). */
/*
 * 한 줄에 3장까지만 - 4장씩이면 캐릭터가 5명일 때 마지막 줄에 카드가 1개만
 * 남아서 정렬이 어색해진다. 3장씩 배치하면 3+2로 끊어져서 훨씬 안정적으로
 * 맞는다. 카드 3개 + 간격 2개 폭으로 딱 맞춰서 4번째부터는 자연스럽게 다음
 * 줄로 넘어간다. 그 안에서는 가운데 정렬 - margin auto로 패널 안에서
 * 가운데, justify-content도 center라서 마지막 줄(카드 수가 3의 배수가
 * 아닐 때)도 가운데 놓인다. (js/character-picker.js의 CHARACTER_GRID_COLUMNS
 * 와 같은 값으로 맞춰야 위/아래 방향키 이동이 카드 배치와 일치한다.)
 */
#character-picker {
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 48px auto 0;
  max-width: calc(3 * 190px + 2 * 12px);
  overflow-y: auto;
  padding: 4px;
  scrollbar-color: rgba(255, 255, 255, 0.55) transparent;
  scrollbar-width: thin;
}

/* 기본 브라우저 스크롤바가 투박해서, 카드와 어울리는 얇고 둥근 흰색 바로
   바꾼다 (Firefox는 위 scrollbar-color/-width, 그 외는 아래 -webkit-*). */
#character-picker::-webkit-scrollbar {
  width: 8px;
}

#character-picker::-webkit-scrollbar-track {
  background: transparent;
}

#character-picker::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
}

#character-picker::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

/*
 * 테두리 없이, 얼굴 초상화 + 이름만으로 고르는 카드 (레퍼런스 참고). 뒤에 노을
 * 배경을 깔면서, 은은한 반투명 판을 받쳐 얼굴·이름이 사진 속에 묻히지 않게 한다.
 */
.character-option {
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  border: none;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 8px;
  justify-content: center;
  padding: 12px 18px 10px;
  width: 190px;
}

.character-option:focus-visible {
  border-radius: 8px;
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

/* 선택된 캐릭터 위에만 뜨는 화살표. */
.character-select-arrow {
  animation: select-arrow-bounce 1s ease-in-out infinite;
  color: #f4b400;
  font-size: 1.6em;
  line-height: 1;
  visibility: hidden;
}

.character-option[aria-checked='true'] .character-select-arrow {
  visibility: visible;
}

@keyframes select-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.character-option[aria-checked='true'] .character-preview {
  transform: scale(1.08);
}

/*
 * Karu(강아지) 사진은 사람 사진보다 가로로 넓은 비율이라, height만 맞추면
 * 카드 폭이 캐릭터마다 들쭉날쭉해진다 - width/height를 각각 auto로 두고
 * max-width·max-height를 똑같이 줘서(가로·세로 중 더 큰 쪽 기준으로 맞춤)
 * 비율과 상관없이 다 같은 상자 안에 들어오게 한다.
 */
.character-preview {
  display: block;
  height: auto;
  max-height: clamp(80px, 8vw, 130px);
  max-width: clamp(80px, 8vw, 130px);
  transition: transform 120ms ease;
  width: auto;
}

.character-name {
  color: #222;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75em;
}

/*
 * 게임 오버 화면의 '리플레이' / '오늘의 운세' 버튼. 아케이드 모드에서 캔버스가
 * transform:scale로 커지므로, top/left는 고정값이 아니라 JS(share-card.js의
 * positionActions())가 캔버스의 실제 렌더링 위치를 읽어 매번 다시 계산해 넣는다.
 */
.game-over-actions:not([hidden]) {
  align-items: center;
  display: flex;
  gap: 10px;
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 21;
}

.go-btn {
  align-items: center;
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 1em;
  font-weight: 600;
  gap: 9px;
  padding: 12px 22px;
  white-space: nowrap;
}

.go-btn-replay {
  background: #4a4b4e;
}

.go-btn-replay:hover {
  background: #5c5d61;
}

.go-btn-fortune {
  background: #17181a;
}

.go-btn-fortune:hover {
  background: #26272a;
}

.go-btn-icon {
  height: 17px;
  width: auto;
}

img.go-btn-icon {
  image-rendering: pixelated;
}

/*
 * '오늘의 기록 카드' 미리보기 팝업. 마음에 들 때만 공유(저장)하도록 한 단계 끼워 넣는다.
 * display:flex를 주면서 [hidden] 속성의 기본 display:none을 덮어써버리는 걸 막기
 * 위해, 보일 때만(:not([hidden])) flex를 적용한다.
 */
.share-modal:not([hidden]) {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 24px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 30;
}

.share-modal-backdrop {
  background: rgba(0, 0, 0, 0.6);
  inset: 0;
  position: absolute;
}

.share-modal-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  max-height: 90vh;
  max-width: min(90vw, 420px);
  overflow: hidden;
  padding: 16px;
  position: relative;
}

.share-preview-img {
  border-radius: 6px;
  display: block;
  max-height: calc(90vh - 100px);
  width: 100%;
}

.share-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.share-modal-btn {
  border: none;
  border-radius: 6px;
  cursor: pointer;
  flex: 1;
  font: inherit;
  font-weight: 600;
  padding: 10px 12px;
}

.share-modal-btn-primary {
  background: #202124;
  color: #fff;
}

.share-modal-btn-primary:hover {
  background: #3c4043;
}

.share-modal-btn-secondary {
  background: #f1f3f4;
  color: #202124;
}

.share-modal-btn-secondary:hover {
  background: #e2e5e8;
}

@media (max-width: 648px) {
  .interstitial-wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (prefers-color-scheme: dark) {
  html.offline,
  body {
    background-color: #202124;
    color: #9aa0a6;
  }

  /*
   * 캐릭터 선택 화면은 노을 배경 위 흰 판 카드로 고정된 톤이라 시스템 다크모드를
   * 따로 타지 않는다 (team-title/h2/character-name 등은 위에서 정한 색 그대로 둔다).
   */

  .go-btn {
    background: #e8eaed;
    color: #202124;
  }

  .go-btn:hover {
    background: #fff;
  }


  html.offline.inverted {
    background-color: #202124;
    filter: invert(0);
  }

  html.offline.inverted body {
    background-color: #fff;
  }
}