/* ==========================================================================
   종이비행기 (paper-plane)
   무대 위 머리 표시: 왼쪽 점수와 관문 수·정중앙 연속. 효과 글자: 떠오르는 판정(정중앙·아슬아슬), 알림 띠(배수·글라이드·마일스톤·최고 기록), 부딪힌 자리 표시.
   게임 공통 모양(games.css)을 그대로 쓰고, 이 게임에만 있는 것만 더한다.
   ========================================================================== */

.pp-stage { background: #0A0C1E; }

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

/* ---------- 톡 힌트: 아래 가운데(휴대폰 고정 화면에서는 호스팅 배지 자리만큼 위로) ---------- */
.pp-hint { bottom: calc(11% + var(--xg-bottom-gap, 0px)); display: inline-flex; align-items: center; gap: 8px; }
.pp-hint b { color: var(--text); font-weight: 750; }
.pp-hint kbd { height: 22px; min-width: 22px; }

/* ---------- 효과 글자 ---------- */
.pp-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }

/* 떠오르는 판정: 비행기 옆에서 위로 */
.pp-pop { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; animation: pp-pop 850ms var(--ease-out) forwards; }
.pp-pop b { display: block; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: #fff; text-shadow: 0 0 14px rgba(99,242,210,.45), 0 2px 10px rgba(0,0,0,.6); }
.pp-pop span { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: .9rem; color: var(--ether-2); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.pp-pop.is-hot b { color: var(--xync-2); text-shadow: 0 0 16px rgba(255,138,102,.5), 0 2px 10px rgba(0,0,0,.6); }
.pp-pop.is-hot span { color: var(--xync-2); }
.pp-pop.is-near b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.5rem; letter-spacing: 0; }
.pp-pop.is-near span { color: var(--text); }
@keyframes pp-pop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  70% { opacity: 1; transform: translate(-50%, -74%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -96%); }
}

/* 알림 띠: 위쪽 가운데 */
.pp-banner {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%);
  text-align: center; white-space: nowrap; animation: pp-banner 1300ms var(--ease-out) forwards;
}
.pp-banner::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 150%; height: 220%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(5,8,12,.6), rgba(5,8,12,.3) 55%, rgba(5,8,12,0));
}
.pp-banner b {
  display: block; font-weight: 820; font-size: clamp(1.7rem, 4.4vw, 2.8rem); letter-spacing: -0.02em; line-height: 1.1; color: #fff;
  text-shadow: 0 0 22px rgba(99,242,210,.35), 0 3px 18px rgba(0,0,0,.6);
}
.pp-banner span { display: block; margin-top: 8px; font-family: var(--f-mono); font-weight: 500; font-size: clamp(1rem, 2.2vw, 1.3rem); color: var(--ether); text-shadow: 0 0 14px rgba(99,242,210,.4); }
.pp-banner.is-mult b { color: var(--xync-2); text-shadow: 0 0 22px rgba(255,138,102,.4), 0 3px 18px rgba(0,0,0,.6); }
.pp-banner.is-mult span { color: var(--xync-2); text-shadow: 0 0 14px rgba(255,138,102,.4); }
.pp-banner.is-line b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 5.2vw, 3.4rem); letter-spacing: 0; color: #FFF6DC; text-shadow: 0 0 24px rgba(255,236,190,.45), 0 3px 18px rgba(0,0,0,.6); }
.pp-banner.is-line span { color: #FFF6DC; }
.pp-banner.is-mile { animation-duration: 1700ms; }
.pp-banner.is-mile span { color: var(--text-2); font-family: var(--f-sans); font-weight: 600; }
.pp-banner.is-mile span::first-line { font-family: var(--f-sans); }
.pp-banner.is-best { animation-duration: 2000ms; }
.pp-banner.is-best 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;
}
.pp-banner.is-best span { color: var(--text); font-family: var(--f-sans); font-weight: 600; }
@keyframes pp-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%); }
}

/* 부딪힌 자리: 무엇에 부딪혔는지 작게 */
.pp-hit {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(7,10,15,.78);
  font-size: .84rem; color: var(--text-2); animation: pp-hit 600ms var(--ease-out) both;
}
@keyframes pp-hit { from { opacity: 0; transform: translate(-50%, -30%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* 결과 화면의 한 줄 */
.pp-why { font-size: .92rem; color: var(--text-2); }

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

@media (max-aspect-ratio: 4/5) {
  .pp-banner { top: 26%; }
}
@media (max-width: 860px) {
  .pp-sub { margin-top: 6px; }
  .pp-hint { font-size: .86rem; padding: 8px 14px; }
  .pp-pop b { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-hud .xg-mult.is-bump { transform: none; }
}