/* ── UJU 디자인 시스템 ─────────────────────────────── */
:root {
  --bg: #030310;
  --text-main: rgba(255, 255, 255, 0.93);
  --text-sub: rgba(255, 255, 255, 0.55);
  --text-faint: rgba(255, 255, 255, 0.35);
  --accent-live: #7df3d4;
  --accent-fresh: rgba(180, 215, 255, 0.45);
  --card-bg: rgba(8, 8, 22, 0.55);
  --card-border: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text-main);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 데스크톱: 기본 커서 숨김 + 커스텀 우주 커서 사용 */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: none; }
  a, button, input, textarea, .planet, .planet-ring, .planet-moon, .msg { cursor: none; }
}

button { font-family: inherit; }
input { font-family: inherit; }

/* ── 커스텀 우주 커서 ─────────────────────────────── */
.cursor-orbit {
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 44px; height: 44px;
  /* margin 대신 transform translate(-50%, -50%) 와 동일한 효과를 위해
     JS에서 translate3d로 마우스 좌표를 직접 넣고, 여기선 정렬 오프셋만 */
  pointer-events: none;
  mix-blend-mode: screen;
  /* transform은 JS가 매 프레임 갱신하므로 transition 금지 (지연/감도 원인) */
  transition: opacity 0.2s ease;
  /* 크기 변경은 부드럽게 (코어/링 자체 크기) */
  will-change: transform;
}
.cursor-orbit.hidden { opacity: 0; }
/* hover-target은 자식 요소만 키워서 본체 transform과 충돌 안 나게 */
.cursor-orbit.hover-target .cursor-core {
  transform: scale(1.6);
}
.cursor-orbit.hover-target .cursor-ring,
.cursor-orbit.hover-target .cursor-ring-2 {
  width: 140%; height: 140%;
  margin-left: -70%; margin-top: -70%;
}
.cursor-orbit.hover-target .cursor-ring-2 {
  width: 100%; height: 100%;
  margin-left: -50%; margin-top: -50%;
}
.cursor-core, .cursor-ring, .cursor-ring-2,
.cursor-satellite, .cursor-satellite-2 {
  transition: width 0.25s ease, height 0.25s ease,
              margin 0.25s ease, transform 0.25s ease;
}

/* 커서 코어 (작은 행성) */
.cursor-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin-left: -4px; margin-top: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255, 240, 220, 1) 0%,
    rgba(180, 215, 255, 0.95) 35%,
    rgba(110, 80, 200, 0.8) 70%,
    rgba(50, 30, 90, 0.5) 100%);
  box-shadow:
    0 0 8px rgba(180, 215, 255, 0.9),
    0 0 18px rgba(180, 215, 255, 0.5),
    0 0 32px rgba(110, 80, 200, 0.35),
    inset -1px -1px 2px rgba(0,0,0,0.4);
  animation: cursor-core-pulse 2.4s ease-in-out infinite;
}
@keyframes cursor-core-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* 커서 궤도 링 */
.cursor-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  margin-left: -50%; margin-top: -50%;
  border-radius: 50%;
  border: 0.6px solid rgba(180, 215, 255, 0.32);
  box-shadow:
    inset 0 0 10px rgba(180, 215, 255, 0.08),
    0 0 14px rgba(110, 80, 200, 0.18);
  animation: cursor-ring-spin 6s linear infinite;
}
.cursor-ring-2 {
  width: 72%; height: 72%;
  margin-left: -36%; margin-top: -36%;
  border-color: rgba(255, 200, 180, 0.22);
  animation: cursor-ring-spin 10s linear infinite reverse;
  border-style: dashed;
}
@keyframes cursor-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 궤도 위의 작은 위성 */
.cursor-satellite {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  margin-left: -50%; margin-top: -50%;
  animation: cursor-satellite-orbit 4s linear infinite;
}
.cursor-satellite::after {
  content: '';
  position: absolute;
  top: -2px; left: 50%;
  width: 3px; height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: rgba(255, 230, 200, 0.95);
  box-shadow:
    0 0 6px rgba(255, 230, 200, 0.9),
    0 0 12px rgba(255, 180, 120, 0.5);
}
.cursor-satellite-2 {
  animation: cursor-satellite-orbit 7s linear infinite reverse;
}
.cursor-satellite-2::after {
  background: rgba(180, 215, 255, 0.95);
  box-shadow:
    0 0 6px rgba(180, 215, 255, 0.9),
    0 0 12px rgba(140, 180, 255, 0.5);
}
@keyframes cursor-satellite-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 마우스 트레일 잔상 — JS가 transform: translate3d로 위치 설정,
   애니메이션은 opacity만 변경해서 위치를 덮어쓰지 않도록 */
.cursor-trail {
  position: fixed;
  top: 0; left: 0;
  z-index: 9998;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(180, 215, 255, 0.7);
  box-shadow: 0 0 8px rgba(180, 215, 255, 0.7);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: cursor-trail 0.9s ease-out forwards;
  will-change: opacity;
}
@keyframes cursor-trail {
  0%   { opacity: 0.85; }
  100% { opacity: 0; }
}

/* ── 코스믹 배경 ──────────────────────────────────── */
#cosmos {
  position: fixed; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 네뷸라 (radial-gradient) */
.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 1;
}
.nebula-purple {
  width: 70vmax; height: 70vmax;
  left: -20vmax; top: -10vmax;
  background: radial-gradient(circle, rgba(95,60,165,0.18) 0%, rgba(95,60,165,0) 60%);
}
.nebula-teal {
  width: 60vmax; height: 60vmax;
  right: -15vmax; bottom: -15vmax;
  background: radial-gradient(circle, rgba(50,110,145,0.16) 0%, rgba(50,110,145,0) 60%);
}
.nebula-amber {
  width: 40vmax; height: 40vmax;
  left: 20vw; bottom: -10vmax;
  background: radial-gradient(circle, rgba(165,95,50,0.10) 0%, rgba(165,95,50,0) 70%);
}

/* 별 캔버스 */
#stars {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* ── 행성 ────────────────────────────────────────── */
.planet {
  position: absolute;
  pointer-events: auto; /* 클릭 가능하도록 변경 */
  cursor: pointer;
  will-change: transform;
}

/* 가스 거인 — 우상단 30% 크롭, 천천히 부유 + 자전 느낌 띠 */
.planet-gas {
  width: 520px; height: 520px;
  right: -240px; top: -200px;
  border-radius: 50%;
  background:
    /* 표면 디테일 — 다층 그라데이션으로 깊이감 */
    radial-gradient(ellipse 60% 25% at 35% 30%,
      rgba(200, 170, 255, 0.18) 0%,
      rgba(200, 170, 255, 0) 60%),
    radial-gradient(ellipse 80% 30% at 60% 70%,
      rgba(80, 50, 150, 0.35) 0%,
      rgba(80, 50, 150, 0) 60%),
    radial-gradient(circle at 32% 32%,
      rgba(170, 130, 240, 0.65) 0%,
      rgba(110, 70, 190, 0.55) 35%,
      rgba(55, 35, 110, 0.7) 70%,
      rgba(20, 12, 40, 0.85) 100%);
  box-shadow:
    inset -50px -60px 100px rgba(0,0,0,0.65),
    inset 30px 20px 80px rgba(200,170,255,0.08),
    0 0 100px rgba(120, 80, 200, 0.25),
    0 0 200px rgba(95, 60, 165, 0.15);
  overflow: hidden;
  animation: float-gas 42s ease-in-out infinite alternate;
}
/* 가스 거인 띠 — 가로로 천천히 흘러감 */
.planet-gas .planet-band {
  position: absolute;
  left: -20%; right: -20%;
  top: 56%;
  height: 18px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 220, 200, 0.04) 15%,
    rgba(255, 220, 200, 0.14) 35%,
    rgba(255, 220, 200, 0.20) 50%,
    rgba(255, 220, 200, 0.14) 65%,
    rgba(255, 220, 200, 0.04) 85%,
    transparent 100%);
  filter: blur(3px);
  animation: band-flow 28s linear infinite;
}
/* 가스 거인 두 번째 띠 (반대 방향, 위쪽) */
.planet-gas::before {
  content: '';
  position: absolute;
  left: -20%; right: -20%;
  top: 38%;
  height: 10px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 200, 180, 0.04) 20%,
    rgba(255, 200, 180, 0.10) 50%,
    rgba(255, 200, 180, 0.04) 80%,
    transparent 100%);
  filter: blur(2px);
  animation: band-flow-reverse 36s linear infinite;
}
/* 폭풍 점 (목성 대적점 느낌) */
.planet-gas::after {
  content: '';
  position: absolute;
  width: 60px; height: 32px;
  left: 30%; top: 48%;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(180, 100, 80, 0.35) 0%,
    rgba(180, 100, 80, 0) 70%);
  filter: blur(4px);
  animation: storm-pulse 8s ease-in-out infinite;
}

/* 고리 행성 — 좌하단, 살짝 떠다님 + 미세 회전 */
.planet-ring {
  width: 240px; height: 240px;
  left: -50px; bottom: -50px;
  opacity: 0.9;
  filter: drop-shadow(0 0 30px rgba(255, 180, 120, 0.18));
  animation: float-ring 35s ease-in-out infinite alternate;
}

/* 작은 달 — 궤도 도는 듯한 움직임 */
.planet-moon {
  width: 22px; height: 22px;
  right: 22vw; top: 22vh;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(235, 235, 245, 0.92) 0%,
    rgba(170, 170, 185, 0.78) 50%,
    rgba(70, 70, 85, 0.7) 100%);
  box-shadow:
    0 0 20px rgba(220,220,240,0.28),
    inset -4px -5px 10px rgba(0,0,0,0.5);
  animation: float-moon 28s ease-in-out infinite;
}
/* 달 크레이터 디테일 */
.planet-moon::before {
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  left: 8px; top: 6px;
  background: rgba(0,0,0,0.18);
  border-radius: 50%;
  box-shadow:
    9px 3px 0 -1px rgba(0,0,0,0.15),
    3px 11px 0 -2px rgba(0,0,0,0.12);
}

/* ── 행성 부유 애니메이션 ─────────────────────────── */
@keyframes float-gas {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-14px, 18px) rotate(0.6deg); }
  100% { transform: translate(8px, -10px) rotate(-0.4deg); }
}
@keyframes float-ring {
  0%   { transform: translate(0, 0) rotate(-2deg); }
  50%  { transform: translate(12px, -14px) rotate(0deg); }
  100% { transform: translate(-8px, 6px) rotate(2deg); }
}
@keyframes float-moon {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(40px, -22px); }
  50%      { transform: translate(60px, 12px); }
  75%      { transform: translate(20px, 36px); }
}
@keyframes band-flow {
  0%   { transform: translateX(0); }
  100% { transform: translateX(20%); }
}
@keyframes band-flow-reverse {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-15%); }
}
@keyframes storm-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.15); }
}

/* ── 행성 클릭 반응 ───────────────────────────────── */
.planet-gas.planet-react {
  animation: float-gas 42s ease-in-out infinite alternate,
             planet-react-gas 1.4s ease-out;
}
@keyframes planet-react-gas {
  0%   { box-shadow: inset -50px -60px 100px rgba(0,0,0,0.65), 0 0 100px rgba(120, 80, 200, 0.25); }
  30%  { box-shadow: inset -50px -60px 100px rgba(0,0,0,0.65), 0 0 180px rgba(180, 130, 255, 0.6), 0 0 280px rgba(180, 130, 255, 0.3); }
  100% { box-shadow: inset -50px -60px 100px rgba(0,0,0,0.65), 0 0 100px rgba(120, 80, 200, 0.25); }
}
.planet-ring.planet-react {
  animation: float-ring 35s ease-in-out infinite alternate,
             planet-react-ring 1.4s ease-out;
}
@keyframes planet-react-ring {
  0%   { filter: drop-shadow(0 0 30px rgba(255, 180, 120, 0.18)); }
  30%  { filter: drop-shadow(0 0 60px rgba(255, 180, 120, 0.85)) drop-shadow(0 0 100px rgba(255, 180, 120, 0.4)); }
  100% { filter: drop-shadow(0 0 30px rgba(255, 180, 120, 0.18)); }
}
.planet-moon.planet-react {
  animation: float-moon 28s ease-in-out infinite,
             planet-react-moon 1.4s ease-out;
}
@keyframes planet-react-moon {
  0%   { box-shadow: 0 0 20px rgba(220,220,240,0.28), inset -4px -5px 10px rgba(0,0,0,0.5); }
  30%  { box-shadow: 0 0 60px rgba(240,240,255,0.95), 0 0 120px rgba(240,240,255,0.5), inset -4px -5px 10px rgba(0,0,0,0.5); transform: scale(1.5); }
  100% { box-shadow: 0 0 20px rgba(220,220,240,0.28), inset -4px -5px 10px rgba(0,0,0,0.5); }
}

/* ── 빈 공간 클릭 ripple ──────────────────────────── */
.click-ripple {
  position: fixed;
  z-index: 38;
  width: 8px; height: 8px;
  margin-left: -4px; margin-top: -4px;
  border-radius: 50%;
  border: 1px solid rgba(180, 215, 255, 0.7);
  pointer-events: none;
  animation: click-ripple 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes click-ripple {
  0%   { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(8); opacity: 0; }
}

/* ── 멀리 있는 나선 은하 ──────────────────────────── */
#cosmos .galaxy {
  position: absolute;
  width: 360px; height: 360px;
  left: 55%; top: 35%;
  margin-left: -180px; margin-top: -180px;
  background:
    radial-gradient(ellipse 60% 12% at 50% 50%,
      rgba(255, 230, 200, 0.18) 0%,
      rgba(180, 140, 220, 0.10) 30%,
      rgba(90, 60, 150, 0.06) 60%,
      transparent 80%),
    radial-gradient(circle at 50% 50%,
      rgba(255, 240, 220, 0.25) 0%,
      rgba(255, 240, 220, 0) 12%);
  border-radius: 50%;
  filter: blur(1.5px);
  opacity: 0.6;
  transform: rotate(-25deg);
  animation: galaxy-spin 180s linear infinite;
}
@keyframes galaxy-spin {
  from { transform: rotate(-25deg); }
  to   { transform: rotate(335deg); }
}

/* ── 상단 바 ─────────────────────────────────────── */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 28px 0;
  pointer-events: none;
}
.top-bar > * { pointer-events: auto; }

.brand-wrap { display: flex; flex-direction: column; gap: 6px; }
.brand {
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.45em;
  font-size: 19px;
  color: var(--text-main);
  text-indent: 0.45em;
}
.tagline {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.35);
  text-transform: none;
}

.top-right {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 10px;
}

.live-counter {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  color: var(--accent-live);
  letter-spacing: 0.06em;
}
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-live);
  box-shadow: 0 0 8px var(--accent-live);
  animation: live-pulse 2.2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

.top-nav { display: flex; gap: 14px; }
.nav-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 2px;
  transition: color .2s ease;
}
.nav-btn:hover { color: var(--text-main); }

/* ── 메시지 월 ───────────────────────────────────── */
/* 입력바(z-index: 11) 아래에만 배치되도록 명시 */
#wall {
  position: fixed;
  left: 0; right: 0;
  top: 0;
  /* 하단 입력바 영역(약 110px)을 wall 영역에서 제외 */
  bottom: 110px;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

/* ── 우주선 + 말풍선 하이브리드 (v2: 떠다니는 우주선) ── */
.msg {
  position: absolute;
  min-width: 150px;
  max-width: min(330px, 78vw);
  padding: 16px 20px 18px;

  /* 메탈 헐 — 다층 그라데이션으로 입체감 */
  background:
    /* 상단 캐노피 윈도우 띠 */
    linear-gradient(180deg,
      rgba(180,215,255,0.12) 0%,
      rgba(180,215,255,0.04) 14%,
      rgba(8,8,22,0) 26%),
    /* 메탈 본체 (위 밝음, 아래 어두움) */
    linear-gradient(180deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0) 30%,
      rgba(0,0,0,0.18) 92%),
    var(--card-bg);

  /* 캡슐형 비대칭 라운드 */
  border-radius: 24px 24px 30px 30px / 32px 32px 22px 22px;
  border: 0.5px solid var(--card-border);

  /* 메탈 베젤 — 상단 하이라이트 + 하단 그림자 + 외부 안개 */
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.18),
    inset 0 -0.5px 0 rgba(0,0,0,0.45),
    inset 0 8px 24px rgba(180,215,255,0.05),
    0 4px 22px rgba(0,0,0,0.45);

  font-size: 13px;
  line-height: 1.55;
  color: var(--text-main);
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  hyphens: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    opacity 1.2s ease,
    box-shadow 1.5s ease,
    border-color 1.5s ease;
  pointer-events: auto;
  will-change: transform, opacity;

  /* 다중 모션 — 각각 다른 transform 프로퍼티(scale/translate/rotate)에 적용 */
  animation:
    msg-enter 1.4s cubic-bezier(0.22, 1, 0.36, 1) both,
    msg-drift var(--drift-dur, 24s) ease-in-out infinite alternate,
    msg-tilt var(--tilt-dur, 6.5s) ease-in-out infinite var(--tilt-delay, 0s);
}

/* 닉네임 — 본문 위 작은 모노스페이스 라벨 */
.msg-nick {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(180, 215, 255, 0.62);
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 0.5px dashed rgba(180, 215, 255, 0.16);
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}
.msg.fresh .msg-nick {
  color: rgba(200, 225, 255, 0.85);
  border-bottom-color: rgba(180, 215, 255, 0.3);
}

/* 본문 — 자동 줄바꿈 보장 */
.msg-body {
  display: block;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  position: relative;
  z-index: 1;
}

/* ── 우주선 부품 ───────────────────────────────────── */

/* 안테나 — 코크핏 위로 솟은 가는 막대 + 깜빡이는 라이트 */
.msg-antenna {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg,
    rgba(180,215,255,0) 0%,
    rgba(180,215,255,0.45) 40%,
    rgba(180,215,255,0.85) 100%);
  pointer-events: none;
}
.msg-antenna::before {
  /* 상단 깜빡이는 라이트 */
  content: '';
  position: absolute;
  top: -3.5px;
  left: 50%;
  transform: translateX(-50%);
  width: 3.5px; height: 3.5px;
  border-radius: 50%;
  background: rgba(255, 90, 110, 0.95);
  box-shadow:
    0 0 4px rgba(255, 90, 110, 0.85),
    0 0 12px rgba(255, 90, 110, 0.45);
  animation: msg-antenna-blink var(--blink-dur, 1.6s) steps(1, end) infinite var(--blink-delay, 0s);
}
@keyframes msg-antenna-blink {
  0%, 55%   { opacity: 1; }
  56%, 100% { opacity: 0.12; }
}

/* 코크핏 (캐노피) — 위쪽 중앙 타원 유리 돔 */
.msg-cockpit {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 16px;
  border-radius: 50% 50% 30% 30% / 80% 80% 22% 22%;
  background:
    /* 안쪽 유리 반사 — 좌상단 하이라이트 */
    radial-gradient(ellipse at 30% 25%,
      rgba(240, 250, 255, 0.95) 0%,
      rgba(180, 215, 255, 0.55) 22%,
      rgba(80, 120, 200, 0.45) 55%,
      rgba(30, 50, 100, 0.6) 100%);
  border: 0.5px solid rgba(180, 215, 255, 0.45);
  border-bottom: none;
  box-shadow:
    0 0 8px rgba(180, 215, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.msg-cockpit::after {
  /* 안쪽 작은 라이트 (조종석 등) */
  content: '';
  position: absolute;
  top: 55%; left: 55%;
  transform: translate(-50%, -50%);
  width: 5px; height: 4px;
  border-radius: 50%;
  background: rgba(255, 235, 170, 0.95);
  box-shadow: 0 0 6px rgba(255, 220, 140, 0.75);
  animation: msg-cockpit-light 3.2s ease-in-out infinite;
}
@keyframes msg-cockpit-light {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* 측면 윈도우 (작은 동그란 창 3개) — 하단 좌측 동체에 박힘 */
.msg-windows {
  position: absolute;
  bottom: 7px;
  left: 14px;
  display: flex;
  gap: 5px;
  pointer-events: none;
  z-index: 0;
}
.msg-windows span {
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255, 240, 180, 0.75),
    rgba(255, 190, 90, 0.5) 60%,
    rgba(120, 80, 30, 0.4));
  box-shadow:
    0 0 3px rgba(255, 200, 100, 0.5),
    inset 0 0 1px rgba(0, 0, 0, 0.5);
}

/* 날개 — SVG로 정교하게 (스웹트 윙 + 엔진 나셀 + 항법등) */
.msg-wing {
  position: absolute;
  bottom: 2px;
  width: 34px;
  height: 22px;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 1.5px 3px rgba(0, 0, 0, 0.5));
}
.msg-wing-l { left: -24px; }
.msg-wing-r { right: -24px; transform: scaleX(-1); }
/* fresh 상태에서 엔진 글로우 강화 — circle 자식의 fill-opacity 증가 */
.msg.fresh .msg-wing { filter: drop-shadow(0 1.5px 3px rgba(0,0,0,0.5)) drop-shadow(0 0 4px rgba(255, 200, 100, 0.35)); }

/* 분사 트레일 — 다층 (외곽 플룸 + 코어) */
.msg-thrust {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 28px;
  pointer-events: none;
}
.msg-thrust::before {
  /* 외곽 플룸 - 넓고 흐릿 */
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 28px;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(180,215,255,0.34) 0%,
    rgba(180,215,255,0.14) 38%,
    rgba(180,215,255,0) 78%);
  filter: blur(2px);
  opacity: 0.85;
  animation: msg-thrust-outer 2.4s ease-in-out infinite alternate;
}
.msg-thrust::after {
  /* 코어 - 좁고 진함 */
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 10px;
  height: 20px;
  margin-left: -5px;
  background: linear-gradient(180deg,
    rgba(255, 245, 200, 0.95) 0%,
    rgba(180, 215, 255, 0.7) 28%,
    rgba(120, 160, 240, 0.3) 72%,
    rgba(120, 160, 240, 0) 100%);
  border-radius: 50% 50% 50% 50% / 25% 25% 75% 75%;
  filter: blur(0.5px);
  animation: msg-thrust-core var(--thrust-dur, 0.42s) ease-in-out infinite alternate;
}
@keyframes msg-thrust-outer {
  0%   { opacity: 0.6;  transform: translateX(-50%) scaleY(0.85); }
  100% { opacity: 0.95; transform: translateX(-50%) scaleY(1.18); }
}
@keyframes msg-thrust-core {
  0%   { opacity: 0.85; transform: scaleY(0.9)  scaleX(1.05); }
  100% { opacity: 1;    transform: scaleY(1.12) scaleX(0.95); }
}

/* Fresh — 갓 도착한 메시지, 모든 광원 강화 */
.msg.fresh {
  border-color: rgba(180, 215, 255, 0.32);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.22),
    inset 0 -0.5px 0 rgba(0,0,0,0.45),
    inset 0 8px 24px rgba(180,215,255,0.08),
    0 0 28px rgba(180, 215, 255, 0.20),
    0 0 60px rgba(180, 215, 255, 0.09);
}
.msg.fresh .msg-cockpit {
  border-color: rgba(180, 215, 255, 0.7);
  box-shadow:
    0 0 14px rgba(180, 215, 255, 0.7),
    0 0 26px rgba(180, 215, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}
.msg.fresh .msg-thrust::before { opacity: 1; }
.msg.fresh .msg-thrust::after  { opacity: 1; }

/* Faded — 사라지기 직전 */
.msg.faded {
  opacity: 0.42;
  scale: 0.92;
}

@keyframes msg-enter {
  0%   { opacity: 0; scale: 0.6;  filter: blur(6px); }
  60%  { opacity: 0.9;             filter: blur(0); }
  100% { opacity: 1; scale: 1; }
}

/* drift — 큰 궤적 + 명확한 bob을 한 사이클에 베이크 (떠다니는 느낌 강화) */
@keyframes msg-drift {
  0%   { translate: 0 0; }
  10%  { translate: calc(var(--dx, 12px) * 0.08) calc(var(--dy, -10px) * 0.04 - 4px); }
  22%  { translate: calc(var(--dx, 12px) * 0.22) calc(var(--dy, -10px) * 0.18 + 4px); }
  35%  { translate: calc(var(--dx, 12px) * 0.38) calc(var(--dy, -10px) * 0.30 - 5px); }
  48%  { translate: calc(var(--dx, 12px) * 0.52) calc(var(--dy, -10px) * 0.48 + 3px); }
  60%  { translate: calc(var(--dx, 12px) * 0.65) calc(var(--dy, -10px) * 0.62 - 4px); }
  72%  { translate: calc(var(--dx, 12px) * 0.78) calc(var(--dy, -10px) * 0.78 + 5px); }
  85%  { translate: calc(var(--dx, 12px) * 0.90) calc(var(--dy, -10px) * 0.90 - 3px); }
  100% { translate: var(--dx, 12px) var(--dy, -10px); }
}

/* tilt — 좌우 roll (진폭 키워서 떠다니는 느낌) */
@keyframes msg-tilt {
  0%, 100% { rotate: var(--tilt-min, -2.5deg); }
  50%      { rotate: var(--tilt-max,  2.5deg); }
}

/* 메시지 호버 시 살짝 또렷이 */
@media (hover: hover) {
  #wall:hover .msg { opacity: 0.55; }
  #wall:hover .msg:hover {
    opacity: 1;
    transform: scale(1.02);
    z-index: 6;
  }
}

/* ── 발사 모션 (강화 버전) ────────────────────────── */

/* 입력바 shake + 압축 펄스 */
#composer.shooting {
  animation: composer-shoot 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes composer-shoot {
  0%   { transform: translateX(-50%) scale(1); border-color: rgba(255,255,255,0.16); }
  15%  { transform: translateX(-52%) scale(0.97); }
  25%  { transform: translateX(-48%) scale(0.97); border-color: rgba(180,215,255,0.85); box-shadow: 0 0 40px rgba(180,215,255,0.45), 0 8px 32px rgba(0,0,0,0.45); }
  40%  { transform: translateX(-50%) scale(1.04); }
  100% { transform: translateX(-50%) scale(1); border-color: rgba(255,255,255,0.16); }
}

/* 화면 플래시 */
.shoot-flash {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: radial-gradient(circle at 50% 85%,
    rgba(180,215,255,0.22) 0%,
    rgba(180,215,255,0.08) 25%,
    rgba(180,215,255,0) 55%);
  animation: shoot-flash 0.6s ease-out forwards;
}
@keyframes shoot-flash {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 충격파 링 */
.shoot-ring {
  position: fixed;
  z-index: 45;
  width: 18px; height: 18px;
  margin-left: -9px; margin-top: -9px;
  border-radius: 50%;
  border: 1.5px solid rgba(180, 215, 255, 0.85);
  pointer-events: none;
  animation: shoot-ring 1s ease-out forwards;
}
@keyframes shoot-ring {
  0%   { transform: scale(0.2); opacity: 0.9; border-width: 2px; }
  60%  { opacity: 0.5; }
  100% { transform: scale(14); opacity: 0; border-width: 0.5px; }
}

/* 코어 별 (트레일 동반 슈웅) */
.shoot-core {
  position: fixed;
  z-index: 50;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 14px #ffffff,
    0 0 28px #b4d7ff,
    0 0 48px rgba(180,215,255,0.6);
  pointer-events: none;
  animation: shoot-core 1.1s cubic-bezier(0.5, 0, 0.7, 0.2) forwards;
}
@keyframes shoot-core {
  0%   { transform: translate(0, 0) scale(1.4); opacity: 1; }
  15%  { transform: translate(calc(var(--drift-x) * 0.15), -8vh) scale(1.6); opacity: 1; }
  60%  { transform: translate(calc(var(--drift-x) * 0.6), -55vh) scale(1); opacity: 1; }
  100% { transform: translate(var(--drift-x), -100vh) scale(0.2); opacity: 0; }
}

/* 트레일 파티클 */
.shoot-trail {
  position: fixed;
  z-index: 48;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(180,215,255,0.9);
  box-shadow: 0 0 8px rgba(180,215,255,0.8);
  pointer-events: none;
  animation: shoot-trail 0.8s ease-out forwards;
}
@keyframes shoot-trail {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0;   transform: scale(0.3); }
}

/* 방사형 폭발 파티클 */
.shoot-spark {
  position: fixed;
  z-index: 49;
  width: 4px; height: 4px;
  border-radius: 50%;
  pointer-events: none;
  animation: shoot-spark 1s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}
@keyframes shoot-spark {
  0%   { transform: translate(0, 0) scale(1.2); opacity: 1; }
  60%  { opacity: 0.85; }
  100% { transform: translate(var(--sx), var(--sy)) scale(0.2); opacity: 0; }
}

/* 화면 미세 흔들림 */
body.screen-shake #cosmos,
body.screen-shake #wall {
  animation: screen-shake 0.5s ease-out;
}
@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  15%      { transform: translate(-2px, 1px); }
  30%      { transform: translate(3px, -1px); }
  45%      { transform: translate(-1px, 2px); }
  60%      { transform: translate(2px, 1px); }
  75%      { transform: translate(-1px, -1px); }
}

/* 소멸 — 카드 자체는 살짝 부풀면서 사라짐 (배경/테두리만) */
.msg.dissolving {
  animation: msg-dissolve 1.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  pointer-events: none;
}
@keyframes msg-dissolve {
  0%   { opacity: 1;    transform: scale(1);    filter: blur(0); box-shadow: 0 0 0 rgba(180,215,255,0); border-color: rgba(255,255,255,0.14); background: rgba(8, 8, 22, 0.55); }
  20%  { opacity: 1;    transform: scale(1.05); filter: blur(0); box-shadow: 0 0 40px rgba(180,215,255,0.45), 0 0 80px rgba(180,215,255,0.2); border-color: rgba(180,215,255,0.6); }
  60%  { opacity: 0.5;  transform: scale(1.15); filter: blur(2px); background: rgba(8, 8, 22, 0); border-color: rgba(180,215,255,0.2); }
  100% { opacity: 0;    transform: scale(1.3);  filter: blur(8px); background: rgba(8, 8, 22, 0); border-color: rgba(255,255,255,0); }
}

/* 글자별 분해 — 각 글자가 별가루처럼 흩어짐 */
.char-dissolve {
  display: inline-block;
  opacity: 1;
  will-change: transform, opacity;
  animation: char-dissolve 1.3s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
  text-shadow: 0 0 0 rgba(180, 215, 255, 0);
}
@keyframes char-dissolve {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    text-shadow: 0 0 0 rgba(180, 215, 255, 0);
    color: var(--text-main);
    filter: blur(0);
  }
  25% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1.15);
    text-shadow: 0 0 12px rgba(180, 215, 255, 0.9), 0 0 24px rgba(180, 215, 255, 0.5);
    color: rgba(220, 235, 255, 1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate(var(--cx, 0px), var(--cy, -40px)) rotate(var(--cr, 0deg)) scale(0.3);
    text-shadow: 0 0 6px rgba(180, 215, 255, 0);
    color: rgba(255, 255, 255, 1);
    filter: blur(3px);
  }
}

/* ── 입력바 ──────────────────────────────────────── */
.bottom-vignette {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  z-index: 8;
  background: linear-gradient(to top,
    rgba(3, 3, 16, 0.95) 0%,
    rgba(3, 3, 16, 0.7) 35%,
    rgba(3, 3, 16, 0) 100%);
  pointer-events: none;
}

#composer {
  position: fixed;
  left: 50%; bottom: 36px;
  transform: translateX(-50%);
  z-index: 11;
  width: min(460px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  background: rgba(15, 15, 30, 0.72);
  border: 0.5px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  padding: 6px 6px 6px 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.02) inset;
  transition: border-color .25s ease, box-shadow .25s ease;
}
#composer:focus-within {
  border-color: rgba(180, 215, 255, 0.35);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.45),
    0 0 28px rgba(180,215,255,0.10);
}

#composer-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 14px;
  letter-spacing: 0.005em;
  padding: 10px 8px;
}
#composer-input::placeholder { color: rgba(255,255,255,0.3); }

#composer-send {
  background: rgba(180, 215, 255, 0.12);
  border: 0.5px solid rgba(180, 215, 255, 0.35);
  color: var(--text-main);
  font-size: 12px;
  letter-spacing: 0.22em;
  padding: 9px 14px;
  border-radius: 11px;
  transition: background .2s ease, transform .15s ease;
  text-indent: 0.22em;
}
#composer-send:hover  { background: rgba(180,215,255,0.20); }
#composer-send:active { transform: scale(0.97); }
#composer-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── 푸터 ────────────────────────────────────────── */
.signature {
  position: fixed;
  left: 0; right: 0; bottom: 10px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.22);
  z-index: 9;
  pointer-events: none;
}

/* ── 토스트 ──────────────────────────────────────── */
#toast {
  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%) translateY(20px);
  z-index: 30;
  padding: 10px 16px;
  background: rgba(20, 20, 35, 0.85);
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  color: rgba(255,255,255,0.85);
  font-size: 12.5px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── ABOUT 모달 ──────────────────────────────────── */
#about-modal {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3, 3, 16, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in .25s ease;
}
#about-modal[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.about-card {
  width: min(360px, calc(100vw - 48px));
  background: rgba(12, 12, 28, 0.92);
  border: 0.5px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  padding: 26px 24px 20px;
  color: var(--text-main);
  text-align: center;
}
.about-card h2 {
  margin: 0 0 14px;
  font-weight: 500;
  letter-spacing: 0.45em;
  font-size: 18px;
  text-indent: 0.45em;
}
.about-card p {
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
}
.about-card ul {
  list-style: none;
  padding: 0; margin: 0 0 18px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.8;
}
.about-close {
  background: rgba(180,215,255,0.12);
  border: 0.5px solid rgba(180,215,255,0.32);
  color: var(--text-main);
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 0.22em;
  border-radius: 10px;
  text-indent: 0.22em;
}

/* ── 오늘의 별자리 SVG 오버레이 ──────────────────────── */
.constellation {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  animation: constellation-fade-in 4s ease-out 1.2s forwards;
  mix-blend-mode: screen;
}
@keyframes constellation-fade-in {
  from { opacity: 0; }
  to   { opacity: 0.55; }
}
.constellation .c-line {
  stroke: rgba(180, 215, 255, 0.42);
  stroke-width: 0.6;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(180, 215, 255, 0.5));
}
.constellation .c-star {
  fill: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 0 4px rgba(255, 240, 220, 0.85))
          drop-shadow(0 0 10px rgba(255, 240, 220, 0.4));
  animation: c-twinkle 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.constellation .c-star.bright {
  fill: rgba(255, 245, 230, 1);
  filter: drop-shadow(0 0 6px rgba(255, 230, 200, 0.95))
          drop-shadow(0 0 16px rgba(255, 200, 140, 0.5));
}
.constellation .c-star:nth-child(odd)  { animation-delay: -1.5s; }
.constellation .c-star:nth-child(3n)   { animation-delay: -2.7s; }
@keyframes c-twinkle {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1.0; transform: scale(1.18); }
}
.constellation .c-label {
  fill: rgba(180, 215, 255, 0.45);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.3em;
}

/* ── 이스터에그 오버레이 ─────────────────────────── */
.easter-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.easter-overlay[hidden] { display: none; }
.easter-overlay .easter-text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: 0.4em;
  color: rgba(255, 240, 220, 0.95);
  text-shadow:
    0 0 12px rgba(255, 230, 200, 0.8),
    0 0 32px rgba(180, 215, 255, 0.5);
  animation: easter-pop 3s ease-out forwards;
  text-align: center;
}
@keyframes easter-pop {
  0%   { opacity: 0; transform: scale(0.7); letter-spacing: 1em; }
  20%  { opacity: 1; transform: scale(1.05); letter-spacing: 0.4em; }
  80%  { opacity: 1; transform: scale(1); letter-spacing: 0.45em; }
  100% { opacity: 0; transform: scale(1.1); letter-spacing: 0.6em; }
}
/* 코나미 모드 - 색상 시프트 */
body.konami-mode {
  animation: konami-hue 8s linear infinite;
}
@keyframes konami-hue {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
/* 블랙홀 모드 (트리플 클릭 시) */
.blackhole {
  position: fixed;
  z-index: 150;
  width: 0; height: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.95) 30%,
    rgba(90, 60, 150, 0.5) 50%,
    rgba(180, 130, 220, 0.3) 70%,
    transparent 100%);
  box-shadow:
    0 0 40px rgba(180, 130, 220, 0.6),
    0 0 120px rgba(110, 80, 200, 0.4);
  animation: blackhole-grow 3.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes blackhole-grow {
  0%   { width: 0; height: 0; opacity: 0; }
  20%  { width: 240px; height: 240px; opacity: 1; }
  80%  { width: 320px; height: 320px; opacity: 1; }
  100% { width: 0; height: 0; opacity: 0; }
}

/* ── 행성 추가 디테일 (대기 산란 / 터미네이터) ────── */
.planet-gas {
  /* 대기 산란 (atmospheric scattering) — 가장자리 푸른 빛 띠 */
  position: absolute;
}
.planet-atmosphere {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 32% 32%,
    transparent 60%,
    rgba(180, 150, 255, 0.18) 78%,
    rgba(180, 150, 255, 0.06) 92%,
    transparent 100%);
  filter: blur(2px);
}
.planet-ring .ring-shadow {
  /* 행성 본체 위로 떨어지는 고리 그림자 (SVG 내부 element 용 클래스) */
}

/* 달 추가 크레이터 — 더 사실적으로 */
.planet-moon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle 1.5px at 14px 12px, rgba(0,0,0,0.18), transparent 60%),
    radial-gradient(circle 1px at 4px 14px, rgba(0,0,0,0.12), transparent 60%),
    radial-gradient(circle 0.8px at 17px 4px, rgba(0,0,0,0.10), transparent 60%);
  pointer-events: none;
}

/* ── 모바일 ──────────────────────────────────────── */
@media (max-width: 720px) {
  .brand { font-size: 14px; }
  .tagline { font-size: 9px; }
  .top-bar { padding: 18px 18px 0; }
  .top-nav { display: none; }
  .signature { display: none; }
  .planet-gas { width: 320px; height: 320px; right: -180px; top: -150px; }
  .planet-ring { width: 150px; height: 150px; left: -50px; bottom: -30px; opacity: 0.7; }
  .planet-moon { right: 12vw; top: 18vh; }

  /* 입력바 — iOS Safari의 backdrop-filter가 키보드 포커스 시 거대한 흰색 번짐을 일으킴 → 모바일 제거 */
  #composer {
    bottom: 22px;
    width: calc(100vw - 28px);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 15, 30, 0.92);  /* blur 대신 더 불투명한 배경 */
  }
  #composer:focus-within {
    /* 포커스 시 큰 글로우 제거 — 모바일에선 화면 전체가 번지는 원인 */
    box-shadow:
      0 8px 32px rgba(0,0,0,0.5),
      0 0 0 1px rgba(180,215,255,0.18) inset;
  }
  /* iOS는 input font-size < 16px이면 포커스 시 자동 확대 → 16px 고정 */
  #composer-input { font-size: 16px !important; }

  /* 발사 시 입력바 압축 펄스도 모바일에선 약하게 (큰 글로우 제거) */
  @keyframes composer-shoot-mobile {
    0%, 100% { transform: translateX(-50%) scale(1); }
    25%      { transform: translateX(-50%) scale(0.98); }
    50%      { transform: translateX(-50%) scale(1.02); }
  }
  #composer.shooting { animation: composer-shoot-mobile 0.6s ease both !important; }

  /* 우주선 카드 — iOS Safari의 backdrop-filter + 누적 shadow 렌더 버그 회피 */
  .msg {
    max-width: 76vw;
    min-width: 0;
    font-size: 13px;
    padding: 14px 16px 16px;
    /* backdrop-filter 제거 (iOS Safari에서 메탈 헐 영역이 거대한 글로우로 부풀어 오르는 원인) */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* 살짝 더 불투명한 카드 배경으로 대체 */
    background:
      linear-gradient(180deg,
        rgba(180,215,255,0.10) 0%,
        rgba(180,215,255,0.03) 14%,
        rgba(8,8,22,0) 24%),
      linear-gradient(180deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0) 30%,
        rgba(0,0,0,0.20) 92%),
      rgba(10, 10, 26, 0.85);
    /* 외곽 글로우 축소 */
    box-shadow:
      inset 0 0.5px 0 rgba(255,255,255,0.15),
      inset 0 -0.5px 0 rgba(0,0,0,0.4),
      0 3px 12px rgba(0,0,0,0.5);
  }
  .msg.fresh {
    /* fresh 글로우도 톤다운 — 모바일에선 시야의 큰 부분을 차지하므로 과하면 깨져 보임 */
    box-shadow:
      inset 0 0.5px 0 rgba(255,255,255,0.2),
      inset 0 -0.5px 0 rgba(0,0,0,0.4),
      0 0 14px rgba(180, 215, 255, 0.18);
  }
  .msg-nick { font-size: 9px; }

  /* 부품 — 작은 화면에 맞게 축소 */
  .msg-antenna { top: -18px; height: 11px; }
  .msg-cockpit { width: 36px; height: 14px; top: -8px; }
  .msg-windows { left: 12px; bottom: 6px; }
  .msg-windows span { width: 3.5px; height: 3.5px; }

  /* 날개 — drop-shadow 필터가 iOS Safari에서 합성 비용 큼 → 비활성 */
  .msg-wing { width: 28px; height: 18px; filter: none; }
  .msg.fresh .msg-wing { filter: none; }
  .msg-wing-l { left: -20px; }
  .msg-wing-r { right: -20px; }

  /* 분사 트레일 축소 */
  .msg-thrust { bottom: -20px; width: 24px; height: 22px; }

  /* 모바일은 커스텀 커서/별자리 라벨 제거 */
  .cursor-orbit { display: none; }
  .constellation .c-label { display: none; }

  /* 발사 플래시 강도 다운 (모바일에선 눈부심) */
  .shoot-flash { display: none; }

  /* 메시지 소멸 — 모바일에선 blur(8px) + scale(1.3)이 iOS Safari에서
     "거대한 흰색 블롭" 잔상으로 남음. 단순 페이드아웃으로 대체 */
  @keyframes msg-dissolve-mobile {
    0%   { opacity: 1; }
    50%  { opacity: 0.6; }
    100% { opacity: 0; }
  }
  .msg.dissolving {
    animation: msg-dissolve-mobile 1.2s ease forwards !important;
    filter: none !important;
  }

  /* 글자 별가루 산란도 모바일에선 text-shadow 글로우만, transform 거리 축소 */
  .char-dissolve {
    text-shadow: none !important;
  }

  /* 모든 backdrop-filter 모바일 일괄 비활성 (iOS Safari 합성 버그 회피) */
  #toast {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(20, 20, 35, 0.95);
  }
  #about-modal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(3, 3, 16, 0.92);
  }
}

/* 더 작은 화면 (좁은 폰) — 우주선 진폭 줄여서 카드가 화면 밖으로 튕기지 않게 */
@media (max-width: 480px) {
  .msg {
    /* drift/tilt 모션을 절반으로 — JS가 설정한 변수보다 우선 */
    animation-duration: 1.4s, 28s, 9s !important;
  }
}