/* ==========================================================================
   에테르 드롭 (ether-drop)
   무대 위 머리 표시: 왼쪽 점수와 가장 큰 천체·연쇄. 알림 띠: 새 천체, 연쇄, 은하 충돌, 넘침.
   점수 글자는 캔버스가 그린다. 게임 공통 모양(games.css)을 그대로 쓰고, 이 게임에만 있는 것만 더한다.
   ========================================================================== */

.ed-stage { background: #05080C; cursor: default; }
.ed-stage.is-playing { cursor: crosshair; }

/* ---------- 머리 표시 ---------- */
.ed-hud { align-items: start; height: auto; }
.ed-hud .xg-score { text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.ed-sub { gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ed-top { color: var(--text-2); white-space: nowrap; }
.ed-sub .xg-mult { white-space: nowrap; }

/* ---------- 안내: 아래 가운데(휴대폰 고정 화면에서는 호스팅 배지 자리만큼 위로) ---------- */
/* 처음 병은 비어 있으니 병 가운데쯤에 띄운다 */
.ed-hint { bottom: auto; top: 46%; display: inline-flex; align-items: center; gap: 6px; }
.ed-hint kbd { height: 22px; min-width: 22px; }
.ed-hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .ed-hint-touch { display: inline; }
  .ed-hint-key { display: none; }
}

/* ---------- 알림 띠 ---------- */
.ed-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.ed-banner {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  text-align: center; white-space: nowrap; animation: ed-banner 1500ms var(--ease-out) forwards;
}
.ed-banner::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 160%; height: 240%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(5,8,12,.62), rgba(5,8,12,.3) 55%, rgba(5,8,12,0));
}
.ed-banner b {
  display: block; font-weight: 820; font-size: clamp(1.7rem, 4.2vw, 2.7rem); letter-spacing: -0.03em; line-height: 1.1; color: #fff;
  text-shadow: 0 0 22px rgba(99,242,210,.35), 0 3px 18px rgba(0,0,0,.6);
}
.ed-banner span { display: block; margin-top: 8px; font-size: clamp(.95rem, 2vw, 1.1rem); font-weight: 600; color: var(--text-2); }
.ed-banner.is-chain b { color: var(--xync-2); text-shadow: 0 0 22px rgba(255,138,102,.4), 0 3px 18px rgba(0,0,0,.6); }
.ed-banner.is-chain span { font-family: var(--f-mono); font-weight: 500; color: var(--xync-2); }
.ed-banner.is-found { animation-duration: 1700ms; }
.ed-banner.is-found b { font-family: var(--f-display); font-weight: var(--w-display-strong); letter-spacing: -0.02em; }
.ed-banner.is-galaxy { animation-duration: 2200ms; }
.ed-banner.is-galaxy b {
  background: linear-gradient(90deg, #8AF6DF, #fff 50%, #FFA98C); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(99,242,210,.35)); text-shadow: none;
}
.ed-banner.is-galaxy span { font-family: var(--f-mono); font-weight: 500; color: var(--text); }
.ed-banner.is-over b { color: var(--xync-2); text-shadow: 0 0 20px rgba(255,138,102,.35), 0 3px 18px rgba(0,0,0,.6); }
@keyframes ed-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  24% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -62%); }
}

/* 결과 화면 */
.ed-v3 { font-family: var(--f-sans); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.ed-why { font-size: .92rem; color: var(--text-2); }

/* 움직임 줄이기: 제자리에 잠깐 보였다가 사라진다(시간은 스크립트가 잰다) */
.ed-banner.is-static { animation: none !important; opacity: 1; }

@media (max-aspect-ratio: 4/5) {
  .ed-banner { top: 30%; }
}
@media (max-width: 860px) {
  .ed-sub { margin-top: 6px; }
  .ed-hud-l { max-width: calc(100% - 196px); }   /* 오른쪽의 '다음' 천체(캔버스)와 단추 자리를 비운다. 연쇄 표시는 아랫줄로 */
  .ed-hint { font-size: .86rem; padding: 8px 14px; }
}