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

:root {
  --pink:      #f48fb1;
  --pink-mid:  #f06292;
  --pink-deep: #e91e8c;
  --blue:      #80deea;
  --blue-deep: #26c6da;
  --teal:      #00bcd4;
  --text:      #fce4ec;
  --muted:     rgba(252,228,236,0.55);
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'Quicksand', sans-serif;
  color: var(--text);
  background: #010d18;
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════
   OCEAN BACKGROUND
═══════════════════════════════ */
.ocean {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 90%, rgba(0,120,140,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(244,143,177,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(38,198,218,0.18) 0%, transparent 55%),
    linear-gradient(180deg, #010d18 0%, #021a2e 35%, #032236 65%, #041f30 100%);
}

/* Caustic light rays from above */
.caustics {
  position: fixed; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(
      -48deg,
      transparent 0px, transparent 32px,
      rgba(128,222,234,0.018) 32px, rgba(128,222,234,0.018) 34px
    ),
    repeating-linear-gradient(
      -62deg,
      transparent 0px, transparent 55px,
      rgba(128,222,234,0.012) 55px, rgba(128,222,234,0.012) 57px
    );
  animation: caustic 10s ease-in-out infinite alternate;
}
@keyframes caustic {
  0%   { transform: translateX(0) skewX(0deg); opacity: 0.7; }
  100% { transform: translateX(18px) skewX(1.5deg); opacity: 1; }
}

/* Sea floor hint at very bottom */
.seafloor {
  position: fixed; bottom: 0; left: 0; right: 0; height: 120px; pointer-events: none;
  background: linear-gradient(0deg, rgba(0,60,40,0.45) 0%, transparent 100%);
}
.seafloor::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 40px;
  background: linear-gradient(0deg, rgba(0,80,50,0.3) 0%, transparent 100%);
  border-radius: 60% 60% 0 0 / 20px;
}

/* ═══════════════════════════════
   BUBBLES
═══════════════════════════════ */
.bubbles-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.bub {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(128,222,234,0.3);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(128,222,234,0.04));
  animation: bub-rise linear infinite;
}
.bub::after {
  content: '';
  position: absolute; top: 18%; left: 22%;
  width: 28%; height: 18%;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  transform: rotate(-30deg);
}
@keyframes bub-rise {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  8%   { opacity: 0.7; }
  85%  { opacity: 0.4; }
  100% { transform: translateY(-105vh) translateX(var(--drift)) scale(0.65); opacity: 0; }
}

/* Coral / seaweed silhouettes at bottom */
.coral-layer {
  position: fixed; bottom: 0; left: 0; right: 0; height: 90px;
  pointer-events: none; overflow: hidden;
}
.coral-layer svg { position: absolute; bottom: 0; }

/* ═══════════════════════════════
   AMBIENT PAINT BLOBS
═══════════════════════════════ */
.blob {
  position: fixed; border-radius: 50%;
  filter: blur(70px); opacity: 0.1; pointer-events: none;
  animation: blob-drift ease-in-out infinite alternate;
}
.b1 { width:380px;height:380px; background:var(--pink-mid);  top:-60px;  right:-80px; animation-duration:16s; }
.b2 { width:300px;height:300px; background:var(--blue-deep); bottom:-40px; left:-60px; animation-duration:20s; animation-delay:-7s; }
@keyframes blob-drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(20px,15px) scale(1.08); }
}

/* ═══════════════════════════════
   CALL SCREEN LAYOUT
═══════════════════════════════ */
.screen {
  position: relative; z-index: 10;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 0 0 60px;
}

/* ── Top section: caller info ── */
.caller-section {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
  padding-top: 40px;
}

/* Status text */
.call-status {
  font-size: 13px; font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.12em;
  margin-bottom: 36px;
  text-align: center;
}
.call-status .dot-anim span {
  display: inline-block;
  animation: dot-bounce 1.4s ease-in-out infinite;
  opacity: 0;
}
.call-status .dot-anim span:nth-child(1) { animation-delay: 0s; }
.call-status .dot-anim span:nth-child(2) { animation-delay: 0.2s; }
.call-status .dot-anim span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-bounce {
  0%,80%,100% { opacity: 0; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* Heart-shaped avatar */
.avatar-wrap {
  position: relative;
  margin-bottom: 28px;
}
.heart-clip {
  width: 130px; height: 130px;
  position: relative;
}
/* CSS heart shape via clip-path */
.heart-clip .heart-bg {
  width: 130px; height: 130px;
  clip-path: path('M65,110 C65,110 10,75 10,40 C10,20 25,5 45,5 C55,5 62,10 65,15 C68,10 75,5 85,5 C105,5 120,20 120,40 C120,75 65,110 65,110Z');
  background: linear-gradient(135deg, rgba(240,98,146,0.3), rgba(128,222,234,0.2));
  border: 1.5px solid rgba(244,143,177,0.4);
  overflow: hidden;
  position: relative;
}
.heart-clip .heart-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.92;
}
/* Placeholder when no real image */
.heart-clip .heart-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px;
  background: linear-gradient(135deg, #1a3545, #0f2035);
}

/* Pulse rings around heart */
.pulse-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(244,143,177,0.25);
  animation: pulse-expand 2.4s ease-out infinite;
  pointer-events: none;
}
.pulse-ring:nth-child(1) { width: 155px; height: 155px; animation-delay: 0s; }
.pulse-ring:nth-child(2) { width: 185px; height: 185px; animation-delay: 0.7s; }
.pulse-ring:nth-child(3) { width: 215px; height: 215px; animation-delay: 1.4s; }
@keyframes pulse-expand {
  0%   { opacity: 0.6; transform: translate(-50%,-50%) scale(0.85); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.15); }
}

/* Floating paint specks around avatar */
.paint-speck {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: speck-float ease-in-out infinite alternate;
}
@keyframes speck-float {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(var(--sx),var(--sy)) scale(var(--ss)); }
}

/* Caller name */
.caller-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px; font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  text-shadow: 0 0 20px rgba(244,143,177,0.3);
}

/* Caller subtitle */
.caller-sub {
  font-size: 12px; color: var(--muted);
  letter-spacing: 0.15em;
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  margin-bottom: 6px;
}
@keyframes tail-sway {
  0%   { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}

/* ── Bottom: call actions ── */
.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-bottom: 10px;
}

/* Incoming state: decline + accept */
.btn-row {
  display: flex; align-items: center; gap: 64px;
}
.call-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer;
}
.call-btn-circle {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.call-btn-circle:hover { transform: scale(1.06); }
.call-btn-circle:active { transform: scale(0.94); }
.call-btn-label {
  font-size: 13px; color: var(--muted);
  letter-spacing: 0.06em;
}

.btn-decline .call-btn-circle {
  background: radial-gradient(circle at 40% 35%, #f44, #c62828);
  box-shadow: 0 0 18px rgba(220,50,50,0.4), 0 6px 20px rgba(0,0,0,0.4);
}
.btn-accept .call-btn-circle {
  background: radial-gradient(circle at 40% 35%, #4cde6e, #2daa4a);
  box-shadow: 0 0 20px rgba(45,170,74,0.45), 0 6px 20px rgba(0,0,0,0.4);
}

/* Connected state (hidden initially) */
.connected-ui { display: none; flex-direction: column; align-items: center; gap: 18px; margin-bottom: 40px;}

/* Timer */
.call-timer {
  font-size: 22px; font-weight: 300; letter-spacing: 0.08em;
  color: var(--text); font-family: 'Quicksand', sans-serif;
}

/* Audio waveform indicator */
.wave-indicator {
  display: flex; align-items: flex-end; gap: 3px; height: 28px;
}
.wave-bar {
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--pink), var(--blue-deep));
  animation: wave-dance 0.7s ease-in-out infinite alternate;
}
.wave-bar:nth-child(1){ height:35%; animation-delay:0s; }
.wave-bar:nth-child(2){ height:80%; animation-delay:0.08s; }
.wave-bar:nth-child(3){ height:55%; animation-delay:0.16s; }
.wave-bar:nth-child(4){ height:100%;animation-delay:0.06s; }
.wave-bar:nth-child(5){ height:65%; animation-delay:0.2s; }
.wave-bar:nth-child(6){ height:40%; animation-delay:0.12s; }
.wave-bar:nth-child(7){ height:85%; animation-delay:0.04s; }
@keyframes wave-dance {
  0%   { transform: scaleY(0.25); }
  100% { transform: scaleY(1); }
}

/* Connected end call */
.btn-end .call-btn-circle {
  background: radial-gradient(circle at 40% 35%, #f44, #c62828);
  box-shadow: 0 0 18px rgba(220,50,50,0.4), 0 6px 20px rgba(0,0,0,0.4);
}


/* Small fish swimming */
.fish {
  position: fixed; font-size: 16px;
  opacity: 0.25; pointer-events: none;
  animation: fish-swim linear infinite;
}
@keyframes fish-swim {
  0%   { transform: translateX(0) scaleX(1); }
  49%  { transform: translateX(calc(100vw + 60px)) scaleX(1); }
  50%  { transform: translateX(calc(100vw + 60px)) scaleX(-1); opacity: 0; }
  51%  { opacity: 0.25; }
  100% { transform: translateX(-60px) scaleX(-1); }
}

/* Seaweed sway */
.seaweed {
  position: fixed; bottom: 0;
  font-size: 32px; opacity: 0.2;
  transform-origin: bottom center;
  animation: sway ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes sway {
  0%   { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}

/* incoming / connected state classes */
.incoming-ui { display: flex; flex-direction: column; align-items: center; }
.screen.connected .incoming-ui { display: none; }
.screen.connected .connected-ui { display: flex; }
.screen.connected .call-status-text { display: none; }



/* ── Footer ── */
.footer {
  margin-top: 60px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 9px; color: rgba(154,184,196,0.45);
  letter-spacing: 0.1em;
}



.footer a {
  text-decoration: none; /* 去掉下划线 */
  color: inherit;        /* 继承父元素颜色 */
}

/* 鼠标悬停时也保持无下划线和颜色 */
.footer a:hover, .footer a:visited, .footer a:active {
  text-decoration: none;
  color: inherit;
}