/* =====================================================================
   타자 러너 — 2000년대 PC 캐주얼 횡스크롤 테마
   레퍼런스 톤: 밝은 청록 하늘 · 파스텔 채도 · 오렌지 포인트 · 크림 패널
   픽셀 폰트: Galmuri (OFL, fonts/ 동봉)
   ===================================================================== */
@font-face {
  font-family: "Galmuri11";
  src: url("fonts/Galmuri11.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Galmuri11";
  src: url("fonts/Galmuri11-Bold.woff2") format("woff2");
  font-weight: 700;
}
@font-face {
  font-family: "Galmuri9";
  src: url("fonts/Galmuri9.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Pretendard Variable";
  src: url("fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
}
@font-face {
  font-family: "MaruBuri";
  src: url("fonts/MaruBuri-Regular.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "MaruBuri";
  src: url("fonts/MaruBuri-SemiBold.woff2") format("woff2");
  font-weight: 600;
}

:root {
  --accent: #ff8c3c;            /* 도서 선택 시 도서 색으로 덮임 */
  --sky: #8ec9e8;               /* bg-sky.png 실측 파랑 계열 (디자인가이드 §3.2) */
  --sky-deep: #64aedc;
  --sea: #3f87c0;
  --lavender: #b38eed;          /* 캐릭터 신발색 → 포커스 링·내 기록 하이라이트 전용 보조 액센트 */
  --cream: #fff8ec;
  --cream-2: #ffefd6;
  --line: #e8c892;
  --brown: #5a3e28;
  --brown-dim: #806349;          /* 크림 배경 대비 4.5:1 확보 (가독성 크리틱: 기존 #97785c는 3.2:1) */
  --orange: #ff8c3c;
  --orange-deep: #c05f1e;
  --ok: #2e9e52;
  --bad: #e85555;
  --pending: #c07818;
  --px-font: "Galmuri11", "Galmuri9", monospace;
  --ui-font: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --serif-font: "MaruBuri", "Noto Serif KR", "Nanum Myeongjo", serif;   /* 타자 문장·입력 전용 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
body {
  background: linear-gradient(#b9e0f4 0%, var(--sky) 55%, #a9d8ef 100%);  /* 구름층 → 하늘층 (bg-sky 정합) */
  color: var(--brown);
  font-family: var(--ui-font);   /* 본문·상호작용 = Pretendard (가독성) */
  overflow-x: hidden;
}

/* 픽셀 폰트는 "간판·라벨급"에만 — 짧은 디스플레이 텍스트 (2026-08-13 가독성 크리틱 반영) */
.stage-eyebrow, .stage-heading, .book-no, .book-diff, .modal-title,
.result-title, .result-score, .result-score-label, .side-title,
.console-progress, .title-sub2 {
  font-family: var(--px-font);
}

/* CRT 오버레이는 테마 변경으로 미사용 */
.crt { display: none; }

.screen { display: none; min-height: 100vh; }
.screen.active {
  display: flex; flex-direction: column; align-items: center;
  animation: screen-in 0.35s ease-out;
}
@keyframes screen-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- 공통: 글로시 픽셀 버튼 · 크림 패널 ---------- */
.btn-pixel {
  cursor: pointer;
  font-family: var(--ui-font);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
  background: linear-gradient(#ffa55c, #f0822e);
  border: 2px solid #fff;
  border-radius: 10px;
  padding: 12px 24px;
  box-shadow: 0 3px 0 var(--orange-deep), 0 6px 12px rgba(90, 62, 40, 0.25);
  transition: transform 0.06s;
}
.btn-pixel:hover { filter: brightness(1.06); }
.btn-pixel:active { transform: translateY(3px); box-shadow: 0 0 0 var(--orange-deep), 0 2px 6px rgba(90, 62, 40, 0.25); }
.btn-pixel--dim {
  background: linear-gradient(#fff8ec, #f5e6c8);
  color: var(--brown-dim);
  text-shadow: none;
  box-shadow: 0 3px 0 #d8bd8a, 0 6px 12px rgba(90, 62, 40, 0.15);
}
.btn-pixel--warn {
  background: linear-gradient(#ffe27e, #ffcc42);
  color: var(--brown);
  text-shadow: none;
  box-shadow: 0 3px 0 #d8a92e, 0 6px 12px rgba(90, 62, 40, 0.2);
}
.btn-pixel--accent { text-decoration: none; display: inline-block; }

.pixel-panel {
  background: var(--cream);
  border: 3px solid #fff;
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--line), 0 10px 26px rgba(90, 62, 40, 0.22);
  padding: 26px;
}
.panel-inset { background: var(--cream-2); padding: 18px; border: 2px solid var(--line); border-radius: 10px; }

/* ═══════════ 타이틀 (배경 → 로고 페이드인 → START → 나머지) ═══════════ */
#screen-title { padding: 0; }
.title-stage {
  width: 100%;
  min-height: 100vh;
  background: url("assets/tittle/tittle-bg.jpg") center bottom / cover no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 17px;                     /* 1.2배 스케일 (2026-08-13) */
  padding: 40px 16px;
}
.title-logo {
  width: min(720px, 82vw);       /* 600 → 720 (1.2배) */
  image-rendering: pixelated;
  margin-bottom: 22px;
  opacity: 0;
  animation: title-fade 0.9s ease-out 0.4s forwards;
}
.title-start {
  background: none; border: 0; cursor: pointer; padding: 0;
  opacity: 0;
  animation: title-fade 0.7s ease-out 1.4s forwards;   /* 로고 다음, 하단 요소 3종 동시 등장 */
  transition: transform 0.1s;
}
.title-start img { width: min(336px, 64vw); display: block; animation: start-blink 3.2s ease-in-out 2.4s infinite; }  /* 280 → 336 (1.2배) */
.title-start:hover { transform: scale(1.05); }
.title-start:hover img { animation-play-state: paused; }
.title-start:active { transform: scale(0.97) translateY(2px); }
@keyframes start-blink { 50% { opacity: 0.55; } }   /* 잦은 깜빡임 → 느린 숨쉬기 펄스 */
.title-sub2 {
  color: #fff;
  font-size: 18px; line-height: 1.9; letter-spacing: 1px; text-align: center;   /* 15 → 18 (1.2배) */
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: title-fade 0.7s ease-out 1.4s forwards;
}
.rank-list--title {
  width: min(528px, 92vw);       /* 440 → 528 (1.2배) */
  margin-top: 14px;
  opacity: 0;
  animation: title-fade 0.7s ease-out 2.2s forwards;   /* 랭킹은 맨 마지막 등장 */
}
.rank-list--title .rank-row { font-size: 17px; padding: 11px 16px; }

/* SPECIAL STAGE 카드 (책 선택 화면 — 함께 달리기 진입) */
.book-cover-ph.book-cover-ph--special {
  background: linear-gradient(#d3adf7, #b38eed);
  color: #fff;
  font-family: var(--px-font);
  font-size: 110px; font-weight: 700;   /* 플레이 화면 점수 폰트 스타일 — 흰 글자 + 검정 아웃라인 */
  text-shadow:
    -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000,
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    4px 5px 0 rgba(0, 0, 0, 0.35);
}
.book-card--special:hover { box-shadow: 0 0 0 2px var(--lavender), 0 12px 22px rgba(90, 62, 40, 0.28); }

/* ═══════════ 함께 달리기 — 로비 ═══════════ */
#screen-lobby { justify-content: center; padding: 40px 16px; }
.lobby-wrap { width: min(560px, 94vw); display: flex; flex-direction: column; gap: 16px; text-align: center; }
.lobby-title { font-family: var(--px-font); font-size: 33px; letter-spacing: 3px; color: var(--brown); text-shadow: 1px 1px 0 #fff; }
.lobby-sub { font-size: 14px; color: var(--brown-dim); line-height: 1.6; }
#lobby-entry, #lobby-room { display: flex; flex-direction: column; gap: 14px; }
#lobby-entry[hidden], #lobby-room[hidden], .lobby-panel[hidden] { display: none; }   /* display:flex가 hidden을 덮지 않도록 */
/* 프로필: 아바타 + 닉네임 */
.lobby-profile { display: flex; align-items: center; justify-content: center; gap: 12px; }
.avatar-pick {
  width: 56px; height: 56px; flex: 0 0 56px;
  border: 3px solid var(--line); border-radius: 50%;
  background: var(--cream-2); cursor: pointer; padding: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.avatar-pick:hover { border-color: var(--lavender); }
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar-img[hidden] { display: none; }   /* display:block이 hidden을 덮어 깨진 이미지가 보이던 문제 */
.avatar-fallback { width: 100%; height: 100%; color: var(--brown-dim); display: flex; align-items: center; justify-content: center; }
.avatar-fallback[hidden] { display: none; }
.avatar-pick:hover .avatar-fallback { color: var(--lavender); }
.avatar-img--list, .avatar-fallback--list {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 50%; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream-2); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
  overflow: hidden;
}
.name-wrap--lobby { width: min(230px, 60%); }
#lobby-name {
  width: 100%;
  padding: 11px 74px; border: 3px solid var(--line); border-radius: 10px;   /* 좌우 대칭 패딩 → 텍스트 가운데 */
  background: #fff; color: var(--brown); font-size: 16px; text-align: center;
  outline: none; font-family: inherit;
}
#lobby-name:focus { border-color: var(--lavender); }

/* 탭 */
.lobby-tabs { display: flex; gap: 0; border-bottom: 3px solid var(--line); }
.lobby-tab {
  flex: 1; padding: 12px 0;
  font-family: var(--ui-font); font-size: 15px; font-weight: 700;
  color: var(--brown-dim); background: none; border: 0; cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
}
.lobby-tab.is-active { color: var(--brown); border-bottom-color: var(--orange); }
.lobby-panel { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 6px 0; }
.lobby-panel-desc { font-size: 13px; color: var(--brown-dim); line-height: 1.7; text-align: center; }
.lobby-exit-text { align-self: center; }

.lobby-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.join-row { display: flex; gap: 8px; }
#lobby-code {
  width: 120px; padding: 10px 12px; text-align: center; letter-spacing: 4px;
  border: 3px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--brown); font-size: 17px; font-weight: 700; outline: none; font-family: var(--px-font);
}
#lobby-code:focus { border-color: var(--lavender); }
.lobby-book-pick { display: flex; flex-direction: column; gap: 10px; }
.lobby-book-list { display: flex; flex-direction: column; gap: 8px; }
.lobby-book-btn {
  font-family: var(--ui-font); font-size: 15px; font-weight: 700;
  color: var(--brown); background: var(--cream-2);
  border: 2px solid var(--line); border-left: 8px solid var(--accent);
  border-radius: 10px; padding: 12px 16px; cursor: pointer; text-align: left;
}
.lobby-book-btn:hover { border-color: var(--accent); background: #fff; }
.lobby-error { font-size: 13px; color: var(--bad); min-height: 18px; }
.room-code-label { font-size: 13px; color: var(--brown-dim); letter-spacing: 1px; }
.room-code {
  font-family: var(--px-font); font-size: 54px; font-weight: 700; letter-spacing: 14px;
  color: var(--orange);
  text-shadow: -2px 0 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, 0 2px 0 #fff, 3px 4px 0 rgba(90, 62, 40, 0.2);
}
.room-book { font-size: 14px; color: var(--brown-dim); }
.room-status { font-size: 13px; color: var(--brown-dim); line-height: 1.6; }
.room-status--error { color: var(--bad); font-weight: 700; }

/* ═══════════ 실시간 순위 리스트 (캔버스 우측 상단 — 하트 자리) ═══════════ */
.race-track {
  position: absolute; top: 8px; right: 12px;
  width: min(38%, 230px);
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: none;
}
.track-row {
  display: flex; align-items: center; gap: 7px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 20px; padding: 3px 10px 3px 4px;
}
.track-row--me { outline: 2px solid var(--lavender); }
.track-rank { font-family: var(--px-font); font-size: 12px; font-weight: 700; color: #ffd75e; width: 14px; text-align: center; text-shadow: 1px 1px 0 rgba(0,0,0,0.6); }
.track-name {
  flex: 1;
  font-family: var(--ui-font); font-size: 12px; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
.track-mark { font-size: 11px; color: #fff; min-width: 34px; text-align: right; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); }

/* 라운드 결과 — 캐릭터 화면 가운데 (카운트다운처럼 나타났다 다음 라운드에 사라짐) */
.round-result {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.round-result[hidden] { display: none; }
.round-result-title {
  font-family: var(--px-font);
  font-size: clamp(26px, 4.5vw, 44px); font-weight: 700; letter-spacing: 4px;
  color: var(--orange);
  text-shadow: -3px 0 0 #fff, 3px 0 0 #fff, 0 -3px 0 #fff, 0 3px 0 #fff, 4px 5px 0 rgba(90, 62, 40, 0.35);
  margin-bottom: 6px;
  animation: ready-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.round-result-row {
  display: flex; align-items: center; gap: 9px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 22px;
  padding: 6px 18px 6px 8px;
  color: #fff;
  font-family: var(--ui-font); font-size: 15px; font-weight: 700;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  animation: ready-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.round-result-row--me { outline: 2px solid var(--lavender); }
.round-result-record { color: #b9e0f4; font-weight: 600; font-size: 13px; }
.round-result-pts { color: #ffd75e; }

/* 라운드 결과 토스트 (캔버스 상단 중앙 — 팝업 대신) */
.race-toast {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%) translateY(-8px);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--ui-font); font-size: 14px; font-weight: 600;
  padding: 9px 18px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.race-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.race-toast b { color: #ffd75e; }
.toast-time { color: #b9e0f4; }

/* 레이스 모달 (최종 결과) */
.race-modal { width: min(520px, 94vw); max-height: 88vh; overflow-y: auto; }
.race-overlay-body { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.race-rank { max-height: 40vh; overflow-y: auto; }
.race-rank--big .rank-row { font-size: 18px; padding: 13px 18px; gap: 12px; }
.race-rank--big .rank-no { font-size: 20px; width: 32px; }
.race-rank--big .rank-score { font-size: 17px; min-width: 120px; }
.race-next { text-align: center; font-size: 13px; color: var(--brown-dim); }
.rank-list--title .rank-row { background: rgba(0, 0, 0, 0.34); border: 0; color: #fff; }
.rank-list--title .rank-name, .rank-list--title .rank-score { color: #fff; }
.rank-list--title .rank-no { color: #ffd75e; }
.rank-list--title .rank-book { color: #b9e0f4; }
.rank-list--title .rank-empty { color: rgba(255, 255, 255, 0.75); text-shadow: 1px 1px 0 rgba(0,0,0,0.5); }
@keyframes title-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.arcade-frame {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  width: min(720px, 94vw);
}

/* 가랜드(깃발 장식) 배너 */
.marquee {
  width: 100%;
  text-align: center;
  border: 3px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--line);
  background: var(--cream);
  padding: 9px 0 10px;
  position: relative;
}
.marquee-top { font-size: 13px; letter-spacing: 4px; color: var(--sea); }
.marquee-bulbs, .marquee-bulbs::after {
  content: ""; position: absolute; top: -9px; left: 10px; right: 10px; height: 6px;
  background: repeating-linear-gradient(to right,
    #ff8c3c 0 8px, #ffd75e 8px 16px, #7eced9 16px 24px, #ff9db1 24px 32px);
  border-radius: 3px;
}

.game-logo {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: center;
  font-size: clamp(40px, 6.5vw, 64px); font-weight: 700; letter-spacing: 4px; line-height: 1;
  color: var(--orange);
  text-shadow:
    -3px 0 0 #fff, 3px 0 0 #fff, 0 -3px 0 #fff, 0 3px 0 #fff,
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    5px 7px 0 rgba(90, 62, 40, 0.22);
}
.logo-star {
  color: #ffcc42;
  animation: star-bounce 1.8s ease-in-out infinite;
  display: inline-block;
}
@keyframes star-bounce { 50% { transform: translateY(-8px) rotate(14deg); } }
.logo-sub {
  width: 100%; text-align: center;
  font-size: 15px; letter-spacing: 12px; color: var(--sea);
  text-shadow: 1px 1px 0 #fff;
  margin-top: 10px;
}
.title-catch { font-size: 17px; color: var(--brown); letter-spacing: 2px; text-shadow: 1px 1px 0 rgba(255,255,255,0.7); }

/* 타이틀 데모: 달리는 미니 씬 */
.title-demo {
  width: min(560px, 90vw); height: 64px; position: relative; overflow: hidden;
  border: 3px solid #fff; border-radius: 10px;
  box-shadow: 0 0 0 2px var(--line);
  background: linear-gradient(var(--sky) 0 62%, #c98a3b 62%);
}
.demo-ground, .demo-ground::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 200%; height: 24px;
  background:
    linear-gradient(#e8b84a 0 7px, transparent 7px),
    repeating-linear-gradient(to right, #c98a3b 0 22px, #a06a2c 22px 24px);
  animation: ground-scroll 0.55s linear infinite;
}
@keyframes ground-scroll { to { transform: translateX(-48px); } }
.demo-runner {
  position: absolute; bottom: 22px; left: 46px; width: 26px; height: 30px;
  background:
    radial-gradient(circle at 60% 22%, #f08a3c 0 38%, transparent 38%),
    linear-gradient(#f08a3c 0 12px, #ffd9b4 12px 18px, #ff8c3c 18px 26px, #efe6ff 26px 30px);
  border-radius: 4px;
  animation: runner-bob 0.28s steps(2) infinite;
}
@keyframes runner-bob { 50% { transform: translateY(-3px); } }

.press-start {
  font-family: var(--px-font);
  font-size: 24px; font-weight: 700; letter-spacing: 3px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
  background: linear-gradient(#ffa55c, #f0822e);
  border: 3px solid #fff;
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--orange-deep), 0 8px 18px rgba(90, 62, 40, 0.3);
  cursor: pointer;
  padding: 14px 46px;
  animation: start-pulse 1.6s ease-in-out infinite;
}
.press-start:hover { animation-play-state: paused; transform: scale(1.05); }
.press-start:active { transform: translateY(4px); box-shadow: 0 0 0 var(--orange-deep); }
@keyframes start-pulse { 50% { box-shadow: 0 4px 0 var(--orange-deep), 0 8px 26px rgba(240, 130, 46, 0.55); } }

.insert-coin { font-size: 12px; color: var(--brown-dim); letter-spacing: 2px; }

.hiscore-board {
  width: 100%;
  background: var(--cream);
  border: 3px solid #fff;
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--line), 0 8px 18px rgba(90, 62, 40, 0.18);
  padding: 16px 20px 18px;
}
.hiscore-title {
  text-align: center; font-size: 14px; letter-spacing: 6px;
  color: var(--orange); margin-bottom: 12px;
}

/* ═══════════ 도서 선택 — STAGE SELECT ═══════════ */
#screen-select { padding: 56px 20px 40px; gap: 30px; }
.stage-head { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.stage-eyebrow { font-size: 13px; letter-spacing: 8px; color: var(--sea); text-shadow: 1px 1px 0 #fff; }
.stage-heading {
  font-size: 33px; font-weight: 700; letter-spacing: 3px; color: var(--brown);  /* Galmuri11 ×3 정수 배율 */
  text-shadow: -2px 0 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, 0 2px 0 #fff, 3px 4px 0 rgba(90, 62, 40, 0.18);
}
.book-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2열 대형 카드 */
  gap: 24px;
  width: min(980px, 94vw);
}
.book-card {
  display: flex; flex-direction: column;
  text-align: left;
  font-family: var(--ui-font);
  color: var(--brown);
  background: var(--cream);
  border: 3px solid #fff;
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--line), 0 7px 16px rgba(90, 62, 40, 0.2);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  animation: card-in 0.45s var(--stagger, 0ms) both;
  overflow: hidden;
}
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } }
.book-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 2px var(--accent), 0 12px 22px rgba(90, 62, 40, 0.28);
}
.book-card:hover .book-go { text-decoration: underline; }
.book-marquee {
  height: 42px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
}
.book-no { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 2px; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); }
.book-diff { font-size: 11px; color: rgba(255, 255, 255, 0.85); letter-spacing: 1px; }
.book-body { padding: 16px 16px 18px; display: flex; gap: 14px; align-items: flex-start; }
.book-cover {
  flex: 0 0 132px; width: 132px; height: 186px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line), 2px 3px 0 rgba(90, 62, 40, 0.25);
  border-radius: 4px;
  overflow: hidden;
  background: var(--cream-2);
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-cover-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  padding: 6px; text-align: center;
  font-size: 11px; font-weight: 700; color: #fff; line-height: 1.4;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
.book-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.select-actions { display: flex; flex-direction: column; gap: 14px; align-items: center; width: min(980px, 94vw); }

/* 하단 대형 배너: 학지사에서 책 더 보기 */
.more-banner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 22px 30px;
  background: linear-gradient(#ffe27e, #f5c94e);
  border: 3px solid #fff;
  border-radius: 14px;
  box-shadow: 0 0 0 2px var(--line), 0 4px 0 2px #d8a92e, 0 10px 20px rgba(90, 62, 40, 0.22);
  text-decoration: none;
  transition: transform 0.12s, filter 0.12s;
}
.more-banner:hover { transform: translateY(-3px); filter: brightness(1.04); }
.more-banner:active { transform: translateY(1px); }
.more-banner-text { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.more-banner-title { font-family: var(--px-font); font-size: 22px; font-weight: 700; color: var(--brown); }
.more-banner-sub { font-size: 13px; color: #8a6a1e; }
.more-banner-go {
  font-family: var(--px-font); font-size: 15px; font-weight: 700;
  color: #fff; background: var(--orange);
  border: 2px solid #fff; border-radius: 10px;
  padding: 12px 20px;
  box-shadow: 0 3px 0 var(--orange-deep);
  white-space: nowrap;
}

/* BACK 버튼 — 테두리 없는 텍스트 버튼 (픽셀 폰트) */
.btn-back-px {
  font-family: var(--px-font);
  letter-spacing: 2px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--brown-dim);
  text-shadow: none;
  padding: 8px 12px;
}
.btn-back-px:hover { color: var(--brown); text-decoration: underline; filter: none; }
.btn-back-px:active { transform: none; box-shadow: none; }
/* 보너스 카드 (책 더 보기) — 스테이지 카드와 같은 문법, 골드 톤 */
a.book-card { text-decoration: none; }
.book-cover-ph--more {
  background: linear-gradient(#ffe27e, #e8b84a);
  color: #7a5210;
  text-shadow: none;
  font-size: 13px;
}
.book-card--more:hover { box-shadow: 0 0 0 2px #e8b84a, 0 12px 22px rgba(90, 62, 40, 0.28); }
.book-title { font-size: 23px; font-weight: 700; line-height: 1.3; }
.book-tagline { font-size: 14px; color: var(--brown-dim); }
.book-author { font-size: 13px; color: var(--brown-dim); }
.book-go { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--accent); letter-spacing: 1px; }

/* ═══════════ 플레이 (메인 + 우측 사이드바, 한 화면에) ═══════════ */
#screen-play { justify-content: center; height: 100vh; overflow: hidden; padding: 14px 0; }
.play-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  /* 폭 = 화면 높이에서 역산: 메인 컬럼이 16:9 캔버스 + 콘솔을 세로로 꼭 맞게 수납 */
  width: min(1340px, 97vw, calc((100vh - 302px) * 1.7778 + 316px));
  margin: 0 auto;
  align-items: stretch;
}
.play-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.play-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.runner-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;      /* 캔버스와 동일 비율 → 좌우 여백 없이 꽉 참 */
  background: var(--sky-deep);
  display: flex;
  justify-content: center;
  line-height: 0;
  flex: 0 0 auto;
  position: relative;
  border: 3px solid #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--line), 0 8px 18px rgba(90, 62, 40, 0.18);
}
#runner {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* 우측 사이드바 */
.side-panel {
  background: var(--cream);
  border: 3px solid #fff;
  border-radius: 14px;
  box-shadow: 0 0 0 2px var(--line), 0 8px 18px rgba(90, 62, 40, 0.18);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-panel:first-child { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.side-book { flex: 0 0 auto; }
.side-title { font-size: 14px; font-weight: 700; color: var(--brown-dim); letter-spacing: 1px; }
.side-title--second { margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--line); }
.rank-list--slim .rank-row { padding: 7px 10px; font-size: 13px; gap: 8px; }
.rank-list--slim .rank-score { min-width: 56px; }
.rank-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rank-nameline { display: flex; align-items: center; gap: 6px; }   /* 닉네임 옆에 미완주 배지 */
.rank-main .rank-name { display: inline; }
.rank-bookline {
  font-size: 11px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank-row--2line { align-items: flex-start; }
.rank-row--2line .rank-score { align-self: center; }
.side-book-title { font-size: 18px; font-weight: 700; color: var(--accent); line-height: 1.35; }
.side-book-author { font-size: 12px; color: var(--brown-dim); }
.side-book-desc { font-size: 12.5px; color: var(--brown); line-height: 1.65; }
.btn-side { align-self: flex-start; font-size: 13px; padding: 9px 16px; margin-top: 4px; }
.pause-btn {
  position: absolute; bottom: 10px; right: 14px;
  width: 40px; height: 40px;
  font-size: 17px; line-height: 1;
  color: var(--brown);
  background: rgba(255, 248, 236, 0.88);
  border: 2px solid #fff;
  border-radius: 10px;
  box-shadow: 0 2px 0 var(--line);
  cursor: pointer;
}
.pause-btn:hover { background: #fff; }

/* READY - GO! 시작 연출 */
.ready-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.ready-overlay[hidden] { display: none; }
.ready-text, #ready-text {
  font-family: var(--px-font);
  font-size: clamp(40px, 8vw, 84px);
  font-weight: 700; letter-spacing: 8px;
  color: var(--orange);
  text-shadow:
    -3px 0 0 #fff, 3px 0 0 #fff, 0 -3px 0 #fff, 0 3px 0 #fff,
    5px 6px 0 rgba(90, 62, 40, 0.3);
  animation: ready-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes ready-pop { from { transform: scale(0.2); opacity: 0; } }

.console {
  width: 100%;
  margin: 0;
  background: var(--cream);
  border: 3px solid #fff;
  border-radius: 14px;
  box-shadow: 0 0 0 2px var(--line), 0 8px 18px rgba(90, 62, 40, 0.18);
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.console.shake { animation: shake 0.25s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.console-head { display: flex; justify-content: space-between; align-items: center; }
.console-book { font-weight: 700; color: var(--accent); font-size: 15px; }
.console-progress { color: var(--brown-dim); font-size: 15px; }

.sentence {
  font-family: var(--serif-font);   /* 도서 원문 = 명조 (책 읽는 감각) */
  font-size: 32px;
  font-weight: 600;
  line-height: 1.6;
  word-break: keep-all;
  min-height: 52px;
  color: var(--brown);
}
.sentence.slide-in { animation: slide-in 0.28s ease-out; }
@keyframes slide-in { from { opacity: 0; transform: translateX(24px); } }
.ch { padding: 1px 1px; border-radius: 4px; }
.ch--todo { color: #c3ab8e; }
.ch--ok { color: var(--ok); }
.ch--pending { color: var(--pending); background: #ffe2a8; }
.ch--bad { color: #fff; background: var(--bad); }
.ch--caret { box-shadow: inset 0 -4px 0 var(--accent); border-radius: 0; animation: caret 0.9s steps(2) infinite; }  /* 캐럿 라인은 각지게 */
@keyframes caret { 50% { box-shadow: inset 0 -4px 0 transparent; } }

.type-input {
  width: 100%;
  font-size: 24px;
  padding: 15px 18px;
  border: 3px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--brown);
  outline: none;
  font-family: var(--serif-font);   /* 입력도 문장과 같은 명조 */
}
.type-input::placeholder { color: #c3ab8e; }
.type-input:focus { border-color: var(--lavender); box-shadow: 0 0 0 3px rgba(179, 142, 237, 0.25); }

/* 문장을 정확히 다 친 상태 — Enter 확정 대기 */
.type-wrap { position: relative; display: block; }
.type-input.is-ready,
.type-input.is-ready:focus { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(46, 158, 82, 0.22); }
.enter-hint {
  position: absolute; right: 6px; bottom: calc(100% + 7px);   /* 입력 텍스트를 가리지 않게 위쪽에 */
  font-family: var(--ui-font); font-size: 13px; font-weight: 700;
  color: #fff; background: var(--ok);
  border-radius: 8px; padding: 5px 11px;
  box-shadow: 0 3px 0 #217a3e;
  pointer-events: none;
  animation: enter-hint-pop 0.9s ease-in-out infinite;
}
.enter-hint[hidden] { display: none; }

/* 한글 입력 안내 (Windows 영문 시작 대비) */
.type-input { ime-mode: active; }        /* 구형 브라우저에서만 동작 — 최신 브라우저는 아래 안내로 대응 */
.ime-hint {
  position: absolute; left: 6px; bottom: calc(100% + 7px);
  font-family: var(--ui-font); font-size: 13px; font-weight: 700;
  color: #fff; background: var(--bad);
  border-radius: 8px; padding: 5px 11px;
  box-shadow: 0 3px 0 #a83b3b;
  pointer-events: none;
  animation: enter-hint-pop 0.9s ease-in-out infinite;
}
.ime-hint[hidden] { display: none; }

/* 재연결 안내 (WebSocket 단선 시) */
.conn-badge {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  font-family: var(--ui-font); font-size: 13px; font-weight: 700;
  color: #fff; background: rgba(0, 0, 0, 0.6);
  border-radius: 8px; padding: 6px 14px;
  pointer-events: none;
}
.conn-badge[hidden] { display: none; }
@keyframes enter-hint-pop { 50% { transform: translateY(-3px); } }

.console-stats { display: flex; gap: 26px; align-items: center; color: var(--brown-dim); font-size: 15px; }
.stat-sound {
  font-family: var(--ui-font); font-size: 13px; font-weight: 700;
  color: var(--brown-dim); background: none; border: 2px solid var(--line);
  border-radius: 8px; padding: 4px 10px; cursor: pointer;
}
.stat-sound:hover { color: var(--brown); border-color: var(--brown-dim); }
.stat-sound.is-off { opacity: 0.55; text-decoration: line-through; }
.stat em { font-style: normal; font-weight: 700; color: var(--brown); }
.stat-esc { margin-left: auto; font-size: 12px; opacity: 0.7; }

/* ═══════════ 일시정지 모달 ═══════════ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(31, 60, 70, 0.55);
  display: flex; align-items: center; justify-content: center;
}
.modal-backdrop[hidden] { display: none; }
.modal { width: min(430px, 92vw); text-align: center; display: flex; flex-direction: column; gap: 16px; }
.modal-title {
  font-size: 33px; font-weight: 700; letter-spacing: 10px;   /* Galmuri11 ×3 정수 배율 */
  color: var(--orange);
  text-shadow: -2px 0 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, 0 2px 0 #fff, 3px 4px 0 rgba(90, 62, 40, 0.2);
}
.modal-msg { font-size: 15px; color: var(--brown-dim); }
.modal-actions { display: flex; flex-direction: column; gap: 10px; }

/* ═══════════ 결과 ═══════════ */
#screen-result { padding: 40px 20px; }
.result-wrap { width: min(660px, 94vw); display: flex; flex-direction: column; gap: 18px; text-align: center; }
.result-title { font-size: 32px; letter-spacing: 2px; color: var(--brown); text-shadow: 1px 1px 0 #fff; }
/* 게임오버 무드 구분 */
.result-wrap.is-gameover .result-title { color: var(--bad); }
.result-wrap.is-gameover .result-score { color: var(--brown-dim); text-shadow: -3px 0 0 #fff, 3px 0 0 #fff, 0 -3px 0 #fff, 0 3px 0 #fff; }
.result-score-label { color: var(--sea); font-size: 13px; letter-spacing: 6px; }
.result-score {
  font-size: 58px; font-weight: 700; color: var(--orange);
  text-shadow: -3px 0 0 #fff, 3px 0 0 #fff, 0 -3px 0 #fff, 0 3px 0 #fff, 4px 5px 0 rgba(90, 62, 40, 0.18);
  line-height: 1;
}
.result-stats { display: flex; justify-content: center; gap: 34px; }
.result-stats div { display: flex; flex-direction: column; gap: 4px; }
.result-stats em { font-style: normal; font-size: 21px; font-weight: 700; color: var(--brown); }
.result-stats span { font-size: 12px; color: var(--brown-dim); }

.rank-form { display: flex; gap: 10px; justify-content: center; }
.name-wrap { position: relative; flex: 1; max-width: 260px; display: flex; }
.rank-form input {
  width: 100%;
  padding: 11px 74px 11px 14px;   /* 우측은 글자수 힌트 자리 */
  border: 3px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--brown);
  font-size: 15px; outline: none; font-family: inherit;
}
/* 텍스트 필드 안 글자수 제한 안내 */
.name-limit-hint {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 12px; font-weight: 700; color: var(--bad);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.name-limit-hint.show { opacity: 1; }
.name-wrap.shake { animation: shake 0.25s; }
.rank-form input::placeholder { color: #c3ab8e; }
.rank-form input:focus { border-color: var(--accent); }

.rank-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rank-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--cream-2);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 9px 14px; font-size: 14px;
}
.rank-list--arcade .rank-row { background: transparent; border: 0; padding: 5px 8px; font-size: 15px; }
.rank-list--arcade .rank-row:nth-child(1) .rank-no { color: #e8a20c; }
.rank-list--arcade .rank-row:nth-child(2) .rank-no { color: #9aa4b5; }
.rank-list--arcade .rank-row:nth-child(3) .rank-no { color: #c07a3e; }
.rank-row--me { border-color: var(--lavender); background: rgba(179, 142, 237, 0.12); }
.rank-no { font-weight: 700; color: var(--brown-dim); width: 24px; }
.rank-name { font-weight: 700; }
.rank-dnf { font-size: 11px; color: var(--bad); border: 1px solid var(--bad); border-radius: 4px; padding: 1px 5px; }
.rank-book { margin-left: auto; font-size: 12px; color: var(--accent); }
.rank-score { font-weight: 700; min-width: 76px; text-align: right; }
.rank-empty { color: var(--brown-dim); text-align: center; padding: 14px; font-size: 14px; list-style: none; }

.promo { text-align: left; display: flex; flex-direction: column; gap: 8px; }
.promo-quote { font-size: 15px; line-height: 1.6; color: var(--brown); }
.promo-book { font-size: 14px; color: var(--brown-dim); }
.promo-desc { font-size: 13px; color: var(--brown-dim); line-height: 1.6; }
.promo .btn-pixel--accent { align-self: flex-start; margin-top: 6px; }

.result-actions { display: flex; justify-content: center; gap: 12px; }