/* ════════════════════════════════════════════════════════════
   동물 레이스 — 2000년대 플래시게임 스타일
   ════════════════════════════════════════════════════════════ */

:root {
  --sky-1:     #6ecbff;
  --sky-2:     #c9f0ff;
  --grass:     #74c142;
  --grass-dk:  #4c9327;
  --cream:     #fffaf0;
  --cream-2:   #ffeec9;
  --ink:       #3a2a18;
  --ink-soft:  #6d5943;
  --yellow:    #ffd23f;
  --yellow-dk: #ffa41b;
  --orange:    #ff8a3d;
  --pink:      #ff5d8f;
  --purple:    #9b6cf6;
  --blue:      #3aa3ff;
  --blue-dk:   #1d7fe0;
  --red:       #ff4d4d;
  --panda-ink: #23252d;
  --runner-w:  64px;
  --topbar-h:  46px;

  /* 트랙 테마 기본값(흙길). body[data-track] 이 덮어씁니다. */
  --track-bg:   linear-gradient(180deg, #e7c99a 0%, #d9b57f 46%, #cfa970 47%, #e0c08c 100%);
  --track-line: rgba(255, 255, 255, 0.85);
  --sky-a: #6ecbff; --sky-b: #c9f0ff; --sky-c: #eaf9c9;
  --hill-1: #74c142; --hill-2: #4c9327;
  --ray: rgba(255, 255, 255, 0.30);
}

/* ── 트랙 테마 5종 ──────────────────────────────────────── */
body[data-track="grass"] {
  --track-bg: linear-gradient(180deg, #9fdc72 0%, #7cc551 46%, #6fb944 47%, #93d566 100%);
  --track-line: rgba(255, 255, 255, 0.9);
}
body[data-track="sand"] {
  --track-bg: linear-gradient(180deg, #ffeec2 0%, #f7dda0 46%, #f0d492 47%, #ffe9b6 100%);
  --track-line: rgba(255, 255, 255, 0.95);
  --sky-a: #59c8f5; --sky-b: #bfeeff; --sky-c: #ffe9b6;
  --hill-1: #ffd88a; --hill-2: #f0bd5f;
}
body[data-track="snow"] {
  --track-bg: linear-gradient(180deg, #ffffff 0%, #e4f1fb 46%, #d6e9f8 47%, #f2f9ff 100%);
  --track-line: rgba(120, 170, 210, 0.75);
  --sky-a: #9fd8f2; --sky-b: #dff2ff; --sky-c: #ffffff;
  --hill-1: #eaf6ff; --hill-2: #cfe6f5;
}
body[data-track="space"] {
  --track-bg: linear-gradient(180deg, #3b2f6b 0%, #2a2150 46%, #241c46 47%, #392e66 100%);
  --track-line: rgba(180, 160, 255, 0.85);
  --sky-a: #10091f; --sky-b: #241a44; --sky-c: #3a2a5e;
  --hill-1: #2f2455; --hill-2: #1c1538;
  --ray: rgba(190, 170, 255, 0.12);
}
/* 우주 테마는 글자가 어두운 배경 위에 놓이므로 카드 밖 텍스트를 밝게 */
/* .hero-sub 는 존재하지 않는 클래스였습니다. 실제로 어두운 하늘 위에 놓이는 건 이 둘입니다. */
body[data-track="space"] .race-unit,
body[data-track="space"] .race-target { color: #cfc2ff; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

/* hidden 속성은 브라우저 기본 스타일의 [hidden]{display:none} 으로 동작하는데,
   클래스 선택자가 우선순위에서 이깁니다. 실제로 .countdown{display:grid} 때문에
   GO! 오버레이가 영원히 안 사라지는 버그가 있었습니다. 전역으로 못을 박습니다. */
[hidden] { display: none !important; }

body {
  background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 55%, var(--sky-c) 100%);
  background-attachment: fixed;
  transition: background 0.4s ease;
  color: var(--ink);
  font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }

/* ── 배경 ───────────────────────────────────────────────── */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sunburst {
  position: absolute;
  top: -40vh; left: 50%;
  width: 160vmax; height: 160vmax;
  transform: translateX(-50%);
  background: repeating-conic-gradient(
    from 0deg,
    var(--ray) 0deg 7deg,
    rgba(255, 255, 255, 0) 7deg 14deg);
  animation: spin 90s linear infinite;
}
@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }

.cloud {
  position: absolute;
  width: 150px; height: 46px;
  background: #fff;
  border-radius: 999px;
  opacity: 0.9;
  filter: drop-shadow(0 6px 0 rgba(58, 42, 24, 0.08));
  animation: float 46s linear infinite;
}
.cloud::before, .cloud::after {
  content: ''; position: absolute; background: #fff; border-radius: 50%;
}
.cloud::before { width: 66px; height: 66px; top: -28px; left: 22px; }
.cloud::after  { width: 46px; height: 46px; top: -18px; left: 78px; }
.c1 { top: 12%; left: -20%; animation-duration: 52s; }
.c2 { top: 28%; left: -30%; transform: scale(0.7); animation-duration: 70s; animation-delay: -20s; }
.c3 { top: 6%;  left: -40%; transform: scale(1.2); animation-duration: 88s; animation-delay: -45s; opacity: 0.7; }
@keyframes float { to { left: 130%; } }

.bamboo {
  position: absolute; bottom: 2%;
  font-size: 90px; opacity: 0.55;
  animation: sway 5s ease-in-out infinite;
}
.b1 { left: 2%;  animation-delay: -1s; }
.b2 { left: 92%; animation-delay: -3s; font-size: 120px; }
.b3 { left: 78%; animation-delay: -2s; font-size: 64px; opacity: 0.4; }
@keyframes sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }

.hills {
  position: absolute; left: -5%; right: -5%; bottom: -60px; height: 220px;
  background:
    radial-gradient(70% 100% at 20% 100%, var(--hill-1) 60%, transparent 61%),
    radial-gradient(60% 100% at 70% 100%, var(--hill-2) 60%, transparent 61%),
    radial-gradient(80% 100% at 100% 100%, var(--hill-1) 60%, transparent 61%);
  opacity: 0.55;
}

/* ── 상단바 ─────────────────────────────────────────────── */
/* 로고를 뺀 뒤로는 소리 버튼만 남아서, 여기가 두꺼우면 본문이 통째로 아래로 밀립니다.
   높이를 고정하고 main 의 min-height 계산에도 같은 값을 씁니다. */
.topbar {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
  height: var(--topbar-h);
  max-width: 1360px; margin: 0 auto;
  padding: 0 clamp(14px, 4vw, 36px);
}
.topbar-right { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 36px; height: 36px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #ffe9b8);
  box-shadow: 0 4px 0 var(--ink);
  font-size: 18px; cursor: pointer;
}
.icon-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }

/* ── 레이아웃 ───────────────────────────────────────────── */
main { max-width: 1360px; margin: 0 auto; padding: 4px clamp(14px, 4vw, 36px) 12px; }
.screen { display: none; animation: dropIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.screen.is-active { display: block; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-16px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ── 히어로 ─────────────────────────────────────────────── */
.hero { text-align: center; padding: 6px 0 22px; }
/* 참가자 설정 화면은 한 화면에 다 들어와야 해서 히어로를 납작하게 씁니다 */
.hero-compact { padding: 0 0 8px; }
.hero-compact .hero-title { font-size: clamp(26px, 4.4vw, 44px); margin: 0; }
@keyframes tilt { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
/* 아래 레이어 = 두꺼운 외곽선.
   그라데이션을 요소 자신에게 주면 안 됩니다 — background-clip:text 은 '배경' 레이어에
   그려지는데, CSS 페인팅 순서상 z-index 가 음수인 ::before 가 배경보다 나중에 그려져서
   외곽선이 그라데이션을 통째로 덮어버립니다. 그래서 외곽선을 아래(요소 자신)로,
   그라데이션을 위(::before, z-index 양수)로 뒤집었습니다.
   획 두께는 px 이 아니라 em — 모바일에서 글자만 작아지면 획이 한글 속공간을 메웁니다. */
.hero-title {
  position: relative;
  margin: 6px 0 10px;
  font-size: clamp(30px, 6.5vw, 62px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
  -webkit-text-stroke: 0.16em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 7px 0 rgba(58, 42, 24, 0.4);
  animation: wob 3.5s ease-in-out infinite;
}
.hero-title::before {
  content: attr(data-text);
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, #fff59a 0%, var(--yellow) 45%, var(--orange) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 0;          /* 상속 차단 */
  text-shadow: none;
}
@keyframes wob { 0%, 100% { transform: rotate(-1deg) scale(1); } 50% { transform: rotate(1deg) scale(1.02); } }

/* ── 카드 ───────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 22px;
  padding: clamp(16px, 2.2vw, 24px);
  box-shadow: 0 8px 0 var(--ink), 0 20px 34px rgba(58, 42, 24, 0.25);
}
.card-title {
  margin: 0 0 4px;
  font-size: 19px; font-weight: 900;
  letter-spacing: -0.01em;
}
.card-title.mt { margin-top: 26px; }
.card-title.center { text-align: center; font-size: 24px; }
.card-desc { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-soft); font-weight: 700; }

.sticker {
  position: absolute; top: -16px; right: -10px;
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border: 4px solid var(--ink); border-radius: 50%;
  font-size: 15px; font-weight: 900; color: #fff;
  box-shadow: 0 5px 0 var(--ink);
  transform: rotate(12deg);
  animation: tilt 2s ease-in-out infinite;
  z-index: 2;
}
.sticker-new { background: var(--red); }

textarea {
  width: 100%;
  padding: 12px 14px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.8;
  resize: vertical;
  box-shadow: inset 0 3px 0 rgba(58, 42, 24, 0.08);
}
textarea:focus { outline: 4px solid var(--yellow); outline-offset: 1px; }

/* ── 버튼 ───────────────────────────────────────────────── */
.btn {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 15px; font-weight: 900;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ink), 0 9px 14px rgba(58, 42, 24, 0.22);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
  overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 2px 2px 55% 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.btn:not(:disabled):hover { filter: brightness(1.06); }
.btn:not(:disabled):active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: 0 5px 0 rgba(58, 42, 24, 0.4); }
.btn-lg { padding: 14px 30px; font-size: 17px; }
.btn-sm { padding: 8px 16px; font-size: 13px; box-shadow: 0 4px 0 var(--ink); }
.btn-sm:not(:disabled):active { transform: translateY(4px); }

.btn-yellow { background: linear-gradient(180deg, #ffe680, var(--yellow) 55%, var(--yellow-dk)); }
.btn-green  { background: linear-gradient(180deg, #b6f07a, var(--grass) 55%, var(--grass-dk)); }
.btn-sky    { background: linear-gradient(180deg, #a9dcff, var(--blue) 55%, var(--blue-dk)); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
.btn-gray   { background: linear-gradient(180deg, #fff, #ddd2c2 60%, #c3b6a4); }
.blink { animation: blinkGlow 1.1s ease-in-out infinite; }
@keyframes blinkGlow {
  0%, 100% { box-shadow: 0 5px 0 var(--ink), 0 9px 14px rgba(58, 42, 24, 0.22), 0 0 0 0 rgba(255, 210, 63, 0.9); }
  50%      { box-shadow: 0 5px 0 var(--ink), 0 9px 14px rgba(58, 42, 24, 0.22), 0 0 0 10px rgba(255, 210, 63, 0); }
}

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.btn-row-main { margin-top: 16px; }
.center-row { justify-content: center; }
.hint { margin: 10px 0 0; font-size: 13.5px; font-weight: 800; color: var(--red); min-height: 20px; }
/* 비어 있을 때 자리를 차지하면 설정 화면이 한 화면을 넘습니다 */
.hint:empty { display: none; }

/* ── 참가자 칩 ──────────────────────────────────────────── */
.roster { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 6px;
  border: 3px solid var(--ink); border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 0 var(--ink);
  font-size: 13px; font-weight: 800;
}
.rchip .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); }
.rchip .no { color: var(--ink-soft); font-size: 11px; }

/* ── 옵션 세그먼트 ──────────────────────────────────────── */
/* 참가자 등록 화면: 좌(이름) / 우(설정) 2단 — 세로로 쌓으면 화면을 넘습니다 */
.setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
}
.setup-col { min-width: 0; }
/* 세로 방향에서는 flex-wrap 을 반드시 꺼야 합니다.
   .opt-wide 의 flex-basis:100% 가 '높이의 100%'로 해석돼, 두 블록이 합쳐 200%를 요구하면
   두 번째가 옆 칸으로 넘어가 카드 밖으로 튀어나갑니다. */
.setup-col .opt-grid { flex-direction: column; flex-wrap: nowrap; gap: 12px; margin-top: 6px; }
.setup-col .opt { flex: 0 0 auto; }
.setup-col .roster { max-height: 84px; overflow-y: auto; }

.opt-grid { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 10px; }
.opt { display: flex; flex-direction: column; gap: 7px; }
.opt-wide { flex: 1 1 100%; }
.opt-label { font-size: 12.5px; font-weight: 900; color: var(--ink-soft); }
.opt-note { font-style: normal; font-weight: 700; opacity: 0.75; margin-left: 4px; }
.opt-help { margin: 2px 0 0; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.opt-help b { color: var(--ink); }

/* 이벤트 목록은 접어둡니다 — 펼쳐두면 설정 화면이 한 화면을 넘습니다 */
.event-details { margin-top: 2px; }
.event-details > summary {
  display: inline-block;
  padding: 3px 12px;
  border: 3px dashed rgba(58, 42, 24, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 11.5px; font-weight: 800; color: var(--ink-soft);
  cursor: pointer; list-style: none;
}
.event-details > summary::-webkit-details-marker { display: none; }
.event-details > summary::before { content: '▸ '; }
.event-details[open] > summary::before { content: '▾ '; }
.event-details > summary:hover { border-color: var(--ink); color: var(--ink); }

.event-legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px 12px;
  margin: 4px 0 0; padding: 8px 12px;
  border: 3px dashed rgba(58, 42, 24, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 11.5px; font-weight: 700; line-height: 1.5; color: var(--ink-soft);
}
.event-legend b { font-size: 13px; margin-right: 3px; }

.seg {
  display: inline-flex; flex-wrap: wrap; gap: 5px; padding: 5px;
  border: 3px solid var(--ink); border-radius: 999px;
  background: var(--cream-2);
  box-shadow: 0 4px 0 var(--ink);
}
/* 선택지가 많으면 알약 모양보다 사각 카드가 줄바꿈에 안정적입니다.
   .seg button 과 특이도가 같으므로 반드시 그 뒤에 와야 적용됩니다. */
.seg.seg-multi { border-radius: 16px; }
.seg.seg-multi button { border-radius: 11px; padding: 6px 12px; }
.seg button {
  border: 2px solid transparent; background: transparent;
  color: var(--ink-soft);
  padding: 6px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 900; cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.08s;
}
.seg button.is-on {
  background: linear-gradient(180deg, #b6f07a, var(--grass));
  border-color: var(--ink);
  color: var(--ink);
}
.seg button:not(.is-on):hover { background: rgba(255, 255, 255, 0.7); color: var(--ink); }

/* ── 예측 카드 ──────────────────────────────────────────── */

/* ── 레이스 화면 ────────────────────────────────────────── */
.race-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.race-meta { display: flex; align-items: baseline; gap: 5px; }
.race-time {
  font-size: 40px; font-weight: 900; font-variant-numeric: tabular-nums;
  color: #fff;
  -webkit-text-stroke: 0.13em var(--ink); paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(58, 42, 24, 0.35);
}
.race-unit { font-size: 17px; font-weight: 900; }
.race-target { font-size: 13px; font-weight: 800; color: var(--ink-soft); margin-left: 6px; }
.race-controls { display: flex; gap: 8px; }

.progress {
  height: 18px; margin-bottom: 12px;
  border: 3px solid var(--ink); border-radius: 999px;
  background: #fff; overflow: hidden;
  box-shadow: 0 4px 0 var(--ink);
}
.progress-fill {
  height: 100%; width: 0;
  background: repeating-linear-gradient(45deg, var(--yellow) 0 12px, var(--orange) 12px 24px);
  animation: stripe 0.7s linear infinite;
  transition: width 0.1s linear;
}
@keyframes stripe { to { background-position: 34px 0; } }

.race-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }

.track-wrap {
  background: var(--cream);
  border: 4px solid var(--ink); border-radius: 20px;
  padding: 12px;
  box-shadow: 0 8px 0 var(--ink), 0 18px 30px rgba(58, 42, 24, 0.22);
}
.track-ruler {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 900; color: var(--ink-soft);
  padding: 0 4px 7px;
  border-bottom: 3px dashed rgba(58, 42, 24, 0.22);
  margin-bottom: 6px;
}
.lanes { max-height: 64vh; overflow-y: auto; overflow-x: hidden; padding-right: 4px; }
.lanes::-webkit-scrollbar { width: 10px; }
.lanes::-webkit-scrollbar-track { background: rgba(58, 42, 24, 0.08); border-radius: 5px; }
.lanes::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 5px; }

.lane {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 46px;
  align-items: center; gap: 8px; padding: 3px 0;
}
/* 참가자가 많으면 2열로 나눠 전원이 한 화면에 들어오게 합니다.
   grid-auto-flow: column 이라 1번부터 왼쪽 열을 세로로 채웁니다. */
.lanes.is-two-col {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--lane-rows, 10), auto);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  align-content: start;
}
.lanes.is-two-col .lane { grid-template-columns: 92px minmax(0, 1fr) 40px; gap: 6px; }
.lanes.is-two-col .lane-name { font-size: 12px; }

.lanes.is-three-col {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--lane-rows, 10), auto);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 12px;
  align-content: start;
}
.lanes.is-three-col .lane { grid-template-columns: 74px minmax(0, 1fr) 34px; gap: 4px; }
.lanes.is-three-col .lane-name { font-size: 11px; }
.lanes.is-three-col .lane-no { width: 20px; height: 20px; font-size: 10px; }
.lanes.is-three-col .lane-rank { font-size: 11px; }
.lane-info { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lane-no {
  flex: none; width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 7px;
  font-size: 11px; font-weight: 900; color: var(--ink);
}
.lane-name { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lane-track {
  position: relative;
  height: var(--lane-h, 54px);   /* app.js 의 fitLanes() 가 참가자 수에 맞춰 설정 */
  border: 3px solid var(--ink); border-radius: 12px;
  background: var(--track-bg);
  /* overflow:hidden 이면 이벤트 이모지 뱃지가 트랙 위쪽에서 잘려 거의 안 보입니다.
     차선(::before)과 결승선(::after)은 트랙 안에 딱 맞게 그려지므로 잘라낼 필요가 없습니다. */
  overflow: visible;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35);
}
.lane-track::before {                     /* 차선 점선 */
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--track-line) 0 16px, transparent 16px 34px);
  opacity: 0.55;
}
.lane-track::after {                      /* 결승선 */
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 12px;
  background: repeating-conic-gradient(#fff 0 25%, #2b2b2b 0 50%) 0 0 / 12px 12px;
  border-left: 3px solid var(--ink);
}
.lane-rank { font-size: 13px; font-weight: 900; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.lane.is-first .lane-rank { color: #d64500; }
.lane.is-first .lane-track { box-shadow: inset 0 0 0 3px var(--yellow); }
.lane.is-done .lane-track { filter: saturate(0.65) brightness(1.06); }

.runner {
  position: absolute; bottom: 1px;
  left: calc(var(--p, 0) * (100% - var(--runner-w) - 12px));
  width: var(--runner-w);
  will-change: left;
}
.runner .fx {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  font-size: 18px; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 0 rgba(58, 42, 24, 0.4));
}
.runner.has-fx .fx { opacity: 1; animation: fxpop 0.5s ease; }
@keyframes fxpop {
  0%   { transform: translateX(-50%) scale(0.3) translateY(6px); }
  60%  { transform: translateX(-50%) scale(1.3) translateY(-3px); }
  100% { transform: translateX(-50%) scale(1) translateY(0); }
}

/* ── 팬더 SVG ───────────────────────────────────────────── */
.panda-svg { display: block; width: 100%; height: auto; }
/* 색은 전부 panda.js 에서 캐릭터별로 인라인 지정합니다.
   여기서는 선 굵기·표시 여부처럼 캐릭터와 무관한 것만 다룹니다. */
.panda-svg .p-shadow { fill: rgba(58, 42, 24, 0.28); }
.panda-svg .p-torso, .panda-svg .p-face, .panda-svg .p-muzzle { stroke-width: 2.5; }
.panda-svg .p-eye-shut { fill: none; stroke-width: 1.8; stroke-linecap: round; display: none; }
.panda-svg .p-mouth { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.panda-svg .p-bib, .panda-svg .p-scarf, .panda-svg .p-scarf-tail { stroke-width: 2.5; }
.panda-svg .p-bib-no { font-size: 15px; font-weight: 900; font-family: system-ui, sans-serif; }
.panda-svg .p-speedlines rect { fill: #fff; opacity: 0; }

.panda-badge { width: 100%; height: auto; }
.panda-badge .p-face, .panda-badge .p-muzzle { stroke-width: 2.5; }
.panda-badge .p-mouth { fill: none; stroke-width: 2; stroke-linecap: round; }

.runner.is-running .p-bob        { animation: bob 0.42s ease-in-out infinite; }
.runner.is-running .p-leg-b      { animation: legA 0.42s ease-in-out infinite; }
.runner.is-running .p-leg-f      { animation: legB 0.42s ease-in-out infinite; }
.runner.is-running .p-arm        { animation: arm 0.42s ease-in-out infinite; }
.runner.is-running .p-scarf-tail { animation: flap 0.42s ease-in-out infinite; }

@keyframes bob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5px); } }
@keyframes legA { 0%, 100% { transform: translate(7px, -5px); } 50% { transform: translate(-7px, 0); } }
@keyframes legB { 0%, 100% { transform: translate(-7px, 0); } 50% { transform: translate(7px, -5px); } }
@keyframes arm  { 0%, 100% { transform: translate(-3px, 2px) rotate(-8deg); } 50% { transform: translate(3px, -2px) rotate(10deg); } }
@keyframes flap { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(10deg); } }

.runner.is-boost { animation: lean 0.3s ease forwards; }
.runner.is-boost .p-speedlines rect { opacity: 0.9; animation: zip 0.26s linear infinite; }
.runner.is-boost .p-bob, .runner.is-boost .p-leg-b, .runner.is-boost .p-leg-f { animation-duration: 0.2s; }
@keyframes lean { to { transform: rotate(-8deg); } }
@keyframes zip  { 0% { transform: translateX(5px); opacity: 1; } 100% { transform: translateX(-12px); opacity: 0; } }

.runner.is-slow { animation: wobbly 0.7s ease-in-out infinite; }
.runner.is-slow .p-bob, .runner.is-slow .p-leg-b, .runner.is-slow .p-leg-f { animation-duration: 0.85s; }
@keyframes wobbly { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }

.runner.is-sleep .p-bob, .runner.is-sleep .p-leg-b,
.runner.is-sleep .p-leg-f, .runner.is-sleep .p-arm { animation: none !important; }
.runner.is-sleep .p-eye { display: none; }
.runner.is-sleep .p-eye-shut { display: block; }
.runner.is-sleep { animation: snooze 1.4s ease-in-out infinite; }
@keyframes snooze { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(2px) rotate(3deg); } }

.runner.is-finished .p-bob { animation: cheer 0.55s ease-in-out infinite; }
@keyframes cheer { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.06); } }

/* ── 사이드 패널 ────────────────────────────────────────── */
.side { display: flex; flex-direction: column; gap: 12px; }
.panel {
  background: var(--cream);
  border: 4px solid var(--ink); border-radius: 20px;
  padding: 12px 14px;
  box-shadow: 0 8px 0 var(--ink), 0 18px 30px rgba(58, 42, 24, 0.22);
}
.panel-title { margin: 0 0 8px; font-size: 13px; font-weight: 900; color: var(--ink); }
.ranklist { list-style: none; margin: 0; padding: 0; max-height: 32vh; overflow-y: auto; }
.ranklist li {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 0; font-size: 13px; font-weight: 800;
  border-bottom: 2px dotted rgba(58, 42, 24, 0.18);
}
.ranklist .rk { width: 22px; font-weight: 900; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ranklist li:nth-child(1) .rk { color: #d64500; }
.ranklist .rdot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.ranklist .rname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranklist .rpct { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }

.panel-log .log { list-style: none; margin: 0; padding: 0; max-height: 26vh; overflow-y: auto; }
.log li {
  display: flex; gap: 7px; padding: 5px 0;
  font-size: 12.5px; font-weight: 700; line-height: 1.45;
  border-bottom: 2px dotted rgba(58, 42, 24, 0.18);
  animation: logIn 0.3s ease;
}
.log li.big { color: #d64500; font-weight: 900; }
.log .lg-emoji { flex: none; }
@keyframes logIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* ── 카운트다운 / 사진판정 ──────────────────────────────── */
.countdown {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: rgba(58, 42, 24, 0.42);
  backdrop-filter: blur(2px);
}
.countdown span {
  font-size: clamp(100px, 20vw, 230px); font-weight: 900;
  color: var(--yellow);
  -webkit-text-stroke: 0.09em var(--ink); paint-order: stroke fill;
  text-shadow: 0 10px 0 rgba(58, 42, 24, 0.5);
  animation: cdpop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cdpop { 0% { transform: scale(0.2) rotate(-14deg); opacity: 0; } 45% { transform: scale(1.2) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

.photo-finish {
  position: fixed; top: 16%; left: 50%; z-index: 45;
  transform: translateX(-50%);
  padding: 10px 30px;
  border: 4px solid var(--ink); border-radius: 999px;
  background: linear-gradient(180deg, #fff59a, var(--yellow), var(--orange));
  box-shadow: 0 7px 0 var(--ink), 0 16px 30px rgba(58, 42, 24, 0.35);
  font-size: clamp(17px, 3vw, 27px); font-weight: 900;
  animation: pfPulse 0.55s ease-in-out infinite alternate;
}
@keyframes pfPulse { from { transform: translateX(-50%) scale(1) rotate(-1.5deg); } to { transform: translateX(-50%) scale(1.07) rotate(1.5deg); } }

/* ── 결과 ───────────────────────────────────────────────── */
.podium {
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: end; gap: 10px;
  max-width: 620px; margin: 10px auto 24px;
}
.pod {
  text-align: center; padding: 12px 6px 10px;
  border: 4px solid var(--ink); border-radius: 18px 18px 8px 8px;
  box-shadow: 0 7px 0 var(--ink);
  animation: podUp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.pod-1 { height: 210px; order: 2; background: linear-gradient(180deg, #fff6cd, var(--yellow)); animation-delay: 0.35s; }
.pod-2 { height: 172px; order: 1; background: linear-gradient(180deg, #fff, #d9dee4); animation-delay: 0.12s; }
.pod-3 { height: 150px; order: 3; background: linear-gradient(180deg, #ffe0c0, #e0a877); animation-delay: 0.24s; }
@keyframes podUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.pod .medal { font-size: 32px; line-height: 1; }
.pod .pod-panda { width: 58px; margin: 2px auto; }
.pod .pod-name { font-weight: 900; font-size: 15px; }
.pod .pod-time { font-size: 12px; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.table-wrap { overflow-x: auto; }
.result-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 380px; }
.result-table th {
  text-align: left; font-size: 11.5px; font-weight: 900; color: var(--ink-soft);
  padding: 8px 10px; border-bottom: 3px solid var(--ink);
}
.result-table td { padding: 9px 10px; border-bottom: 2px dotted rgba(58, 42, 24, 0.22); font-weight: 800; font-variant-numeric: tabular-nums; }
.result-table tr.top1 td { color: #d64500; font-weight: 900; }
.result-table .cell-name { display: flex; align-items: center; gap: 8px; }
.result-table .cell-name .dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--ink); }

/* ── 폭죽 ───────────────────────────────────────────────── */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.confetti i {
  position: absolute; top: -20px;
  width: 10px; height: 16px;
  border: 2px solid rgba(58, 42, 24, 0.5);
  animation: fall linear forwards;
}
@keyframes fall {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(108vh) rotate(720deg); opacity: 0.9; }
}

/* ── 방문자 카운터 ──────────────────────────────────────── */
/* pointer-events:none — 화면 위에 떠 있는 요소가 클릭을 먹는 사고를 원천 차단합니다 */
.visits {
  position: fixed; right: 14px; bottom: 12px; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 5px 14px;
  border: 3px solid var(--ink); border-radius: 999px;
  background: linear-gradient(180deg, #fff, var(--cream-2));
  box-shadow: 0 4px 0 var(--ink);
  font-size: 12px; font-weight: 800; color: var(--ink-soft);
  pointer-events: none;
}
.visits-title { color: var(--ink); }
.visits b { color: #d64500; font-size: 14px; font-variant-numeric: tabular-nums; }

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .setup-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .setup-col .roster { max-height: none; }
}
/* 카드를 뷰포트 높이만큼 억지로 늘이지 않습니다 — 1080p 에서 아래가 텅 비어 보입니다.
   대신 좌우 두 칸을 같은 높이로 맞추고(그리드 기본 stretch), 오른쪽 설정 칸보다
   짧은 왼쪽 칸의 남는 공간을 이름 입력창이 흡수하게 합니다.
   결과: 카드는 내용만큼만 높고, 입력창은 설정 칸 높이만큼 커집니다. */
@media (min-width: 901px) {
  #screen-setup .setup-col { display: flex; flex-direction: column; min-height: 0; }
  #screen-setup #names { flex: 1 1 auto; min-height: 104px; max-height: 340px; resize: none; }
  #screen-setup .roster { flex: 0 0 auto; }
}

/* 세로가 짧은 노트북(≈700px)과 태블릿 폭(561~900px)에서도 여백을 조입니다.
   폭 조건을 min-width:901px 로 묶어두면 태블릿에서 설정 화면이 크게 넘칩니다. */
@media (max-height: 780px), (min-width: 561px) and (max-width: 900px) {
  .hero-compact { padding-bottom: 6px; }
  .hero-compact .hero-title { font-size: clamp(24px, 3.4vw, 36px); }
  .setup-col .roster { max-height: 64px; }
  .setup-col .opt-grid { gap: 9px; }
  .opt { gap: 5px; }
  /* 캐릭터 8종이 한 줄에 들어가야 세로가 한 줄만큼(약 30px) 절약됩니다 */
  .seg-multi { gap: 3px; padding: 4px; }
  .seg-multi button { padding: 4px 7px; font-size: 11.5px; }
  .event-legend {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0 10px; padding: 6px 10px; line-height: 1.4; font-size: 11px;
  }
  .opt-help { font-size: 11.5px; }
  .btn-row-main { margin-top: 12px; }
  .card-desc { margin-bottom: 10px; }
}
@media (max-width: 960px) {
  .race-body { grid-template-columns: minmax(0, 1fr); }
  .side { flex-direction: row; flex-wrap: wrap; }
  .side .panel { flex: 1 1 260px; }
  .lanes { max-height: 46vh; }
}
@media (max-width: 560px) {
  .lane { grid-template-columns: 78px minmax(0, 1fr) 38px; gap: 5px; }
  /* height 를 고정하면 fitLanes() 가 설정한 --lane-h 가 무시돼 러너가 잘립니다.
     폴백 값만 낮추고, 실제 높이는 계속 JS 가 정하게 둡니다. */
  .lane-track { height: var(--lane-h, 44px); }
  .lane-name { font-size: 12px; }
  .race-time { font-size: 32px; }
  .pod-1 { height: 170px; } .pod-2 { height: 142px; } .pod-3 { height: 126px; }
  .sticker { width: 52px; height: 52px; font-size: 13px; }
  .visits { right: 8px; bottom: 8px; font-size: 11px; padding: 4px 10px; gap: 7px; }
}

/* ── 이펙트 강화 ────────────────────────────────────────── */
/* 부스트 잔상 — 캐릭터 색(--racer)으로 뒤로 뻗는 꼬리 */
.runner::before {
  content: ''; position: absolute; right: 82%; top: 34%;
  width: 54px; height: 26%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--racer, #fff));
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
}
.runner.is-boost::before { opacity: 0.7; animation: trail 0.32s linear infinite; }
@keyframes trail {
  0%   { transform: translateX(6px) scaleX(0.7); opacity: 0.75; }
  100% { transform: translateX(-14px) scaleX(1.25); opacity: 0; }
}

/* 달릴 때 뒤로 튀는 흙먼지 */
.runner::after {
  content: ''; position: absolute; left: -4px; bottom: 1px;
  width: 13px; height: 13px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  opacity: 0; pointer-events: none;
}
.runner.is-running::after { animation: dust 0.5s ease-out infinite; }
.runner.is-boost::after   { animation-duration: 0.26s; }
.runner.is-sleep::after,
.runner.is-finished::after { animation: none; opacity: 0; }
@keyframes dust {
  0%   { opacity: 0.65; transform: translate(0, 0) scale(0.35); }
  100% { opacity: 0;    transform: translate(-20px, -9px) scale(1.5); }
}

/* 부스트 중에는 캐릭터 자체가 빛납니다 */
.runner.is-boost .panda-svg {
  filter: drop-shadow(0 0 7px var(--racer, #fff)) drop-shadow(0 0 2px #fff);
}

/* 이벤트 뱃지가 터질 때 링이 퍼집니다 */
.runner.has-fx .fx::before {
  content: ''; position: absolute; inset: -7px;
  border: 3px solid var(--racer, #fff); border-radius: 50%;
  opacity: 0;                    /* 없으면 애니메이션이 끝난 뒤 불투명한 원이 그대로 남습니다 */
  animation: burst 0.55s ease-out;
}
@keyframes burst {
  0%   { transform: scale(0.3); opacity: 0.95; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* 1위 레인은 계속 맥박칩니다 */
.lane.is-first .lane-track { animation: leadPulse 1.1s ease-out infinite; }
@keyframes leadPulse {
  0%   { box-shadow: inset 0 0 0 3px var(--yellow), 0 0 0 0 rgba(255, 210, 63, 0.75); }
  100% { box-shadow: inset 0 0 0 3px var(--yellow), 0 0 0 9px rgba(255, 210, 63, 0); }
}

/* 로켓 부스터가 터지면 트랙 전체가 흔들립니다 */
.track-wrap.is-shake { animation: shake 0.45s ease-in-out; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-7px, 3px) rotate(-0.5deg); }
  30% { transform: translate(6px, -4px) rotate(0.5deg); }
  45% { transform: translate(-5px, 2px) rotate(-0.3deg); }
  60% { transform: translate(4px, -2px) rotate(0.3deg); }
  80% { transform: translate(-2px, 1px) rotate(0); }
}

/* 사진 판정 구간에는 트랙이 붉게 달아오릅니다 */
.track-wrap.is-photo {
  box-shadow: 0 8px 0 var(--ink), 0 0 0 6px rgba(255, 93, 143, 0.55), 0 18px 40px rgba(255, 93, 143, 0.4);
  animation: photoGlow 0.5s ease-in-out infinite alternate;
}
@keyframes photoGlow {
  from { box-shadow: 0 8px 0 var(--ink), 0 0 0 4px rgba(255, 93, 143, 0.4), 0 18px 30px rgba(255, 93, 143, 0.3); }
  to   { box-shadow: 0 8px 0 var(--ink), 0 0 0 10px rgba(255, 93, 143, 0.7), 0 18px 46px rgba(255, 93, 143, 0.5); }
}

/* 완주 순간 반짝 */
.runner.is-finished .panda-svg { filter: drop-shadow(0 0 8px var(--yellow)); }

/* ── 역대 전적 모달 ─────────────────────────────────────── */
.records {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(58, 42, 24, 0.55);
  backdrop-filter: blur(3px);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.records[hidden] { display: none !important; }
.records-box {
  position: relative;
  width: min(680px, 100%); max-height: 82vh;
  display: flex; flex-direction: column;
  background: var(--cream);
  border: 4px solid var(--ink); border-radius: 22px;
  padding: 22px 22px 18px;
  box-shadow: 0 8px 0 var(--ink), 0 22px 40px rgba(58, 42, 24, 0.4);
  animation: dropIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.records-close {
  position: absolute; top: -14px; right: -12px;
  width: 40px; height: 40px;
  border: 3px solid var(--ink); border-radius: 50%;
  background: var(--red); color: #fff;
  font-size: 17px; font-weight: 900; cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
}
.records-close:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.records-scroll { overflow: auto; margin-top: 6px; }
.records .card-desc.center { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}